Geek Answers Handbook

Access JavaScript CSS class by name?

I need to access the CSS class by name, and the code below works. However, if I try hui["myclass"] or hui[".myclass"] instead of hui[0] , it will not be able to find it.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style> .myclass { color: #00aa00; } </style> <script type="text/javascript"> function change_class() { var hui = document.styleSheets[0].rules || document.styleSheets[0].cssRules; hui[0].style["color"]="#ff0000" } </script> </head> <body> <div class="myclass" onclick="change_class()">Some Text</div> </body> </html>

EDIT: I need to be able to grab, as I described in line 1, I don’t want to use individual elements on the page, but directly in the stylesheet by class name.

So, you all say that I can’t access the stylesheet by class name only by index?

+2
source share
5 answers

No, you cannot access them using the selector - this is a simple list. First you had to create an index for it:

 // assuming those are the right rules (ie from the right stylesheet) var hui = document.styleSheets[0].rules || document.styleSheets[0].cssRules; var styleBySelector = {}; for (var i=0; i<hui.length; i++) styleBySelector[hui[i].selectorText] = hui[i].style; // now access the StyleDeclaration directly: styleBySelector[".myclass"].color = "#ff0000";

Of course, this is not a stupid method, maybe

  • several selectors like .myClass, .myOtherClass
  • multiple occurrences of one selector (although it does not matter, the last declaration will overwrite previous styles anyway)

and instead of blindly assigning the color property, you should first check for a declaration.

+3
source 
 document.getElementsByClassName('myclass');

will return an array of elements that match.

You can also use something in the lines:

 <body> <div id="changethese"> <div class="myclass" onclick="change_class()">Some Text</div> </div> <div class="myclass">div two</div> </body>

JavaScript:

 var changeTheseDivs = document.getElementById('changethese'); changeTheseDivs.getElementsByClassName('myclass')

To change only the class inside the selected div.

However, support for this method only works in IE9, so if jQuery is an option, it is best to use this.

Edit:

I believe that I am reading incorrectly, it looks like you want to change the CSS rule itself, and not change the CSS on the elements. Theoretically, you could write a function that will find rules for you by name and change their properties. I assume that it will look something like this (untested, should work):

 function findAndChangeCSSRule(ruleName, newRule, newProperty){ var mysheet=document.styleSheets[0]; var myrules=mysheet.cssRules? mysheet.cssRules: mysheet.rules for (i=0; i<myrules.length; i++){ if(myrules[i].selectorText.toLowerCase()==ruleName){ targetrule=myrules[i]; break; } } targetrule.style[newRule.toString()]=newProperty; }

then name it with

 findAndChangeCSSRule('my_class', 'color', 'red')
0
source

To change established rules, this is one approach:

 // the [2] index is only because that where JS Fiddle // puts the user-entered CSS (from the CSS panel). var sheets = document.styleSheets[2].rules, classString = 'body', props = ['color'], // requires a 1:1 relationship between two arrays...ugh to = ['#0f0']; for (var i = 0, len = sheets.length; i < len; i++) { if (sheets[i].selectorText == classString) { for (var c = 0, leng = props.length; c < leng; c++) { sheets[i].style[props[c]] = to[c]; } } }​

JS Fiddle demo .

And a slightly improved alternative (an object, not two arrays that require a 1: 1 ratio):

 var sheets = document.styleSheets[2].rules, classString = 'body', propsTo = { 'color': '#0f0' }; for (var i = 0, len = sheets.length; i < len; i++) { if (sheets[i].selectorText == classString) { for (var prop in propsTo) { if (propsTo.hasOwnProperty(prop)) { sheets[i].style[prop] = propsTo[prop]; } } } }​

JS Fiddle demo .

0
source

Yes, Bergi is right:
First you need to create an index for the style list.
BUT take care:
If the stylesheet is greater than 1, you must first scroll through the stylesheets . Therefore, I like to improve the Bergis solution:

 var styleBySelector = {}; for (var j=0; j<document.styleSheets.length; j++) { var styleList = document.styleSheets[j].rules || document.styleSheets[j].cssRules; for (var i=0; i<styleList.length; i++) styleBySelector[styleList[i].selectorText] = styleList[i].style; } // And then invoke or set the style you wish like this: styleBySelector[".myStyle"].color = "#ff0000";
0
source

(document.styleSheets[0].cssRules || document.styleSheets[0].rules)[0].style.color = '#ff0000' should work.

CSSOM Compatibility Chart (DOM CSS) Quirksmode

-one
source

More articles:


All Articles