CODEWITHSUNDEEP
jquerycss
Khizar Shujaat
Khizar Shujaat

Reputation: 471

Get all classes names from internal stylesheet

How can i get all classes names defined in internal stylesheet using jquery? for example if i have internal stylesheet like

<style  id="custstyle" type="text/css">
            .column{
                font-size:13px;
                font-family:arial, helvetica, verdana, sans-serif;
                font-weight:normal;
                color:rgb(221, 221, 221);
                font-size:13px;
                font-family:arial, helvetica, verdana, sans-serif;
                font-weight:normal;
                color:rgb(221, 221, 221);
            }
        </style>

and $('#custstyle').html() or $('#custstyle').text() will return whole css i-e 

.column{
                font-size:13px;
                font-family:arial, helvetica, verdana, sans-serif;
                font-weight:normal;
                color:rgb(221, 221, 221);
                font-size:13px;
                font-family:arial, helvetica, verdana, sans-serif;
                font-weight:normal;
                color:rgb(221, 221, 221);
            }

but i want to get only .column....

Upvotes: 0

Views: 843

Answers (4)

Ram
Ram

Reputation: 144689

I don't know how this can be useful. However, if you want to get the selectors, you can read the sheet property of HTMLStyleElement:

var rules = $('#custstyle').prop('sheet').cssRules;
var selectors = $.map(rules, function(rule){
     return rule.selectorText;
});

Here selectors is an array of selectors.

http://jsbin.com/iQEvuMeT/1/

In case that you want to get the selectors and their specified styles:

var rules = $('#custstyle').prop('sheet').cssRules;
var results = $.map(rules, function(rule) {
    var o = {};
    $.each(rule.style, function(_, item) {
       o[item] = rule.style[item];
    }); 
    return { selector: rule.selectorText, styles: styles };
});

Now the results is an array of objects, for adding inline styles to the elements you can use css() method. since it accepts an object, you can code:

$.each(results, function(_, v) {
   $(v.selector).css(v.styles);
});

Which results in:

<div class="column" 
     style="font-size: 13px; font-family: arial, helvetica, verdana, sans-serif; font-weight: normal; color: rgb(221, 221, 221);">
</div>

It seems to be useless and redundant, but maybe it can be useful in some cases!

Upvotes: 0

tewathia
tewathia

Reputation: 7298

Try this:

var all = document.querySelectorAll('body *');
var classArray = [];
for (var i=0; i < all.length; i++) {
    for (var j = 0; j < all[i].classList.length; j++) {
        if (classArray.indexOf(all[i].classList[j])<0) {
            classArray.push(all[i].classList[j]);
        }
    }
}

Edit: Since you want to convert internal styles to inline css, this might be more useful

var all = document.querySelectorAll('body *');
var classObj = {};
for (var i = 0; i < all.length; i++) {
    classObj[i] = {
        node: all[i],
        classes: []
    };
    for (var j = 0; j < all[i].classList.length; j++) {
        classObj[i].classes.push(all[i].classList[j]);
    }
}

Upvotes: 0

Ganesh Jadhav
Ganesh Jadhav

Reputation: 2848

To get the css selectors:

var a = $('#custstyle').html();
while (a.indexOf('{') != -1) {
    alert(a.substring(0, a.indexOf('{')));
    a = a.substring(a.indexOf('}') + 1);
}

Fiddle: http://jsfiddle.net/5gzxk/

Upvotes: 1

techfoobar
techfoobar

Reputation: 66663

A non-standard, non-recommended way to list all selectors in a style sheet is:

for(var i=0; i<document.styleSheets.length; i++) {
   var s = document.styleSheets[i];
   for(var j=0; s.cssRules && j<s.cssRules.length; j++) {
      var c = s.cssRules[j];
      console.log(c.selectorText);
   }
}

Upvotes: 0

Related Questions