getting and editing css class of an element using javascript

Question

In JavaScript, the className property gives the class name of an HTML element, but how to get the contents of the class.

Please revisit your other questions and accept the best answers on each of them (i.e. click the big check mark to the left of the best answers). It'll give you a 2-point reputation bump per question, and it helps others know what helped you, thus improving the overall quality of information on this site. — FishBasketGordo
– FishBasketGordo, Commented Jul 31, 2011 at 17:35

nobody · Accepted Answer · 2011-07-31 17:44:14Z

3

first you need to get the cssRules array but since it is not cross platform you should use a code like this:

if ( document.styleSheets[0].cssRules ) {
    var cssRules = document.styleSheets[0].cssRules;
} else if ( document.styleSheets[0].rules ) {
    var cssRules = document.styleSheets[0].rules;
}

now cssRules is an array of selectors in your stylesheet you can go through it like this:

for( var i = 0; i < cssRules.length; ++i ) {
     if( cssRules[i].selectorText == '.myClass' ) {
         alert( cssRules[i].style.color );
     }
}

answered Jul 31, 2011 at 17:44

nobody

10.7k4 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

FishBasketGordo · Accepted Answer · 2011-07-31 18:29:39Z

0

The actual style rules are stored in the style property.

Also, jQuery has some really nice methods for working with style. If you want to explore that route, check out the css method.

EDIT: Just re-read the question and realized that the OP was asking about the style rules for the class, not the style rules for the element. However, because the context isn't exactly clear, I'll let this answer stand for now, as it may still be helpful.

edited Jul 31, 2011 at 18:29

answered Jul 31, 2011 at 17:27

FishBasketGordo

23.2k4 gold badges60 silver badges92 bronze badges

4 Comments

FishBasketGordo Over a year ago

The style property is the pure JavaScript way. You'll want to look at that then.

FishBasketGordo Over a year ago

Well, jQuery is written in pure JavaScript, but it's a framework, and the benefits you get from it come at the cost of some overhead. I can see the OP's point.

SeanCannon Over a year ago

Honestly since when is 31k overhead? The time saved on development makes up for a lot of other factors.

FishBasketGordo Over a year ago

@AlienWebguy I know, I feel the same way about 31K worth of overhead. In most applications, it truly doesn't make a difference in performance.

Collectives™ on Stack Overflow

getting and editing css class of an element using javascript

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related