How can I get ALL class properties in JavaScript

Question

Is it somehow possible to get all properties of a class through JavaScript? Lets say I have a class

.menu { color: black; width: 10px; }

How can I get "color: black; width: 10px;" as a string through JavaScript?

Thank you!

To me this sounds like an odd question. It sounds like you want to manually apply the styles to nodes, instead of using the class. A single rule in CSS has little meaning due to the cascade, the C in CSS. The resulting style will depend on the other rules in your CSS files, the specifity of their selectors, the order of the rules, and the context of the node that matches these particular selectors in the document. — Thomas
– Thomas, Commented Apr 22, 2017 at 22:54

repzero · Accepted Answer · 2017-04-22 22:51:12Z

3

You can use getComputedStyle(). This will find all inline-style or css styling done in a css file..This returns all properties computed of the element

See snippet below

var el=document.getElementsByClassName("menu")[0];
style=getComputedStyle(el);
console.log(style);

.menu{
color:green;
background:blue;
opacity:1
}

<div class="menu"></div>

You can also get a specific property from the class in the above snippet, example

style.width

edited Apr 22, 2017 at 22:51

answered Apr 22, 2017 at 22:45

repzero

8,4203 gold badges21 silver badges42 bronze badges

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

4 Comments

charlietfl Over a year ago

also note that colors returned won't be in words (like "black" in question) or even hex if that's how they are set in css ... will be rgb or rgba depending on browser. To get "black" would require lots more additional work by developer

charlietfl Over a year ago

similar issue with dimensions like %, em etc

Raiko L Over a year ago

Thank you for your answer. getComputedStyle is what I've been using so far. But this returns properties from other classes also. What I need is it to return all properties of a specific class. :(

repzero Over a year ago

In that case you will have to dig into the innerHTML of all style tags and use some form a parser or regex to find that class. Be warned too, if you do this, it does not mean the rules in the class are valid because there may be other rules in other stylesheets or inline style overriding those rules of the class.

Collectives™ on Stack Overflow

How can I get ALL class properties in JavaScript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related