JavaScript access CSS class by its name?

Question

I have to access CSS class by name, and the code below works. However if I try hui["myclass"] or hui[".myclass"] instead of hui[0] it cannot 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 acess as i described on line 1 i dont want to acess trough individual elements on page, but directly to stylesheet by class name.

So you all saying i cannot access to stylesheet by class name only by index?

Don't know it's support level, but [`querySelectorAll()`](https://developer.mozilla.org/en-US/docs/DOM/Document.querySelectorAll) is an option. — Whymarrh, Oct 22 '12 at 22:28

Bergi · Accepted Answer · 2012-10-22T22:39:33.100

No, you can't access them by the selector - it's a simple list. You first had to build 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 fool-proof method, there could be

multiple selectors like .myClass, .myOtherClass
multiple occurences of one selector (though it doesn't matter, the last declaration overwrites previous styles anyway)

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

score 1 · Answer 2 · answered Oct 23 '17 at 18:26

Yes, Bergi is right:
You first have to build an index for the style list.
BUT take care:
If there is more than 1 stylesheet you first have to loop over the stylesheets. So I like to improve 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";

Chris Sobolewski · Answer 3 · 2012-10-22T22:37:22.423

0

document.getElementsByClassName('myclass');

will return an array of elements which match.

You could also use something along the lines of:

<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 within the selected div.

However, support for this method only works back to IE9, so if JQuery is an option, it might be best to use that.

Edit:

I believe I misread, it looks like you want to change the actual CSS rule itself as opposed to changing CSS on the elements. You could, in theory, write a function that will find rules by name for you and change their properties. I guess it would 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 call it with:

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

edited Oct 22 '12 at 22:37

answered Oct 22 '12 at 22:28

Chris Sobolewski

12,613
12
59
95

1

I dont want to access trough any element. – John Smith Oct 22 '12 at 22:32
I saw that sorry for misreading, check out the edit, it should at least get you started. – Chris Sobolewski Oct 22 '12 at 22:37
@JohnSmith Trough means what exactly in this context? I'm assuming you mean -through-, given that a trough is a food container, among other things that have nothing to do with code. – Daedalus Oct 22 '12 at 22:38
@Daedalus He wants to manipulate the stylesheet, not the inline styles. – David Hellsing Oct 22 '12 at 22:39
I don't think you should use `toLowerCase`, that could make a huge difference – Bergi Oct 22 '12 at 22:41
Thx, but other dude was first. – John Smith Oct 22 '12 at 22:41

David Thomas · Answer 4 · 2012-10-22T22:56:00.480

To change the established rules, this is one approach:

// the [2] index is only because that's 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 rather than two arrays, that require a 1:1 relationship):

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.

Bhargav · Answer 5 · 2020-10-02T15:45:35.757

0

To access the class from javascript you just need to create a classist, if it's not there.

document.querySelector("myDiv").classList.add("className");

This adds the new class to the div with the specified class name.

Else:

document.querySelector(".className");

edited Oct 02 '20 at 15:45

answered Sep 27 '20 at 15:09

Bhargav

61
3

score -1 · Answer 6 · answered Oct 22 '12 at 22:36

-1

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

Quirksmode CSSOM (DOM CSS) compatibility table

answered Oct 22 '12 at 22:36

pozs

32,030
5
53
58

That's what i had in beginning just different format now instead of [0] i need name, please read carefully next time. – John Smith Oct 22 '12 at 22:40

JavaScript access CSS class by its name?

6 Answers6

Linked