Getting a field from a named CSS style in Javascript

Question

I have an HTML document with a link tag in its head to a particular CSS stylesheet:

<link rel="stylesheet" href="style.css" type="text/css">

This .css file contains a particular class, like so:

.mystyle {
    color: #00c;
}

What I'm trying to do is to grab that class's color field, so that I can use it dynamically in another part of the page (for another element's background-color). Is there any way in a JavaScript program to access that information, by the name of the class? Something like this:

var myColor = document.getStyle(".mystyle").color;

Some caveats:

There may or may not be other stylesheets that are also linked from this HTML document.
There may or may not be any particular elements on the page that are styled with this particular class.
I've already tried setting a temporary element to have the given class, and then grabbing its color field. That didn't work: the color field contains the empty string.

Thanks.

Bunch of ways to do this, depending on need. Check this out: htmlgoodies.com/html5/css/…. Note that there are more than a few questions that deal with using element.currentStyle and document.getComputedStyle(element), so this question is probably a duplicate. — Tibrogargan
– Tibrogargan, Commented Jan 30, 2018 at 2:11
jsfiddle.net/xp5r8961 from stackoverflow.com/questions/324486/… — Rauli Rajande
– Rauli Rajande, Commented Jan 30, 2018 at 2:11
Might very well be duplicate, but I didn't find anything after searching for several minutes. (At least, not that didn't assume that this was the only style sheet.) Thanks @Tibrogargan--that was exactly the answer I needed. I didn't know that getComputedStyle() existed. — Adam Smith
– Adam Smith, Commented Jan 30, 2018 at 2:26

Robby Cornelissen · Accepted Answer · 2018-01-30 02:47:20Z

1

You can get all stylesheet information using the StyleSheetList and related objects.

In the example below, I aggregate all the document's styles (i.e., inline styles, an external bootstrap stylesheet and the stylesheet provided by Stackoverflow), and retrieve the color information for the .mystyle class:

const sheets = [...document.styleSheets];
const rules = sheets.reduce((a, v) => [...a, ...v.cssRules || []], []);
const rule = rules.find(r => r.selectorText === '.mystyle');

console.log(rule.style.color);

.mystyle {
    color: #00c;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

edited Jan 30, 2018 at 2:47

answered Jan 30, 2018 at 2:17

Robby Cornelissen

98.6k23 gold badges154 silver badges180 bronze badges

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

Comments

Obsidian Age · Accepted Answer · 2018-01-30 02:20:03Z

1

It's possible to use JavaScript to read the actual CSS files themselves by scraping the DOM and extracting the relevant information. While possible, it's clunky, and I'd advise against that unless absolutely necessary. If it's required, this answer covers it pretty well.

As an alternative to scraping the header information, you could use HTMLElement.style and grab the color value, though note that this will only work for inline styles:

var span1 = document.getElementsByTagName('span')[0];
var span2 = document.getElementsByTagName('span')[1];

// Empty
console.log(span1.style.color);

// Blue
console.log(span2.style.color);

.mystyle {
    color: #00c;
}

<span class="mystyle">Text</span>
<span style="color: #00c;">Text</span>

However, a much better solution would be making use of what are known as CSS variables. These are defined in :root with a double hyphen prefix, and can be referenced with var(). This allows you to only set a colour once, and re-use it for both a color property and a background-color property, as can be seen in the following:

:root {
  --colour: #00c;
}

.a {
  color: var(--colour);
}

.b {
  background-color: var(--colour);
}

<span class="a">Text</span>
<span class="b">Text</span>

Hope this helps! :)

edited Jan 30, 2018 at 2:20

answered Jan 30, 2018 at 2:14

Obsidian Age

42.6k11 gold badges54 silver badges76 bronze badges

1 Comment

Adam Smith Over a year ago

That's very cool--I didn't know there were such variables. Won't help in this project, but I'll keep it in mind for later!

quinlo · Accepted Answer · 2018-01-30 02:16:56Z

0

Try window.getComputedStyle in combination with getPropertyValue.

var elem = document.getElementsByClassName("mystyle"); var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("color");

More: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

answered Jan 30, 2018 at 2:16

quinlo

1051 silver badge11 bronze badges

4 Comments

Robby Cornelissen Over a year ago

Check condition 2 in the question: There may or may not be any particular elements on the page that are styled with this particular class. So you'd have to create an element first. In any case, you're not guaranteed to get the color specified in the class. It still depends on what other styles might be applied to the selected element.

quinlo Over a year ago

I see now. Yes that is correct. You could write a script to create a hidden element with just that class applied and then use the above code to find the relevant property (as long as it isn't the property hiding it). The only concern I would have about css variables is browser compatibility but the majority support it and it is proper way of doing this.

Robby Cornelissen Over a year ago

Yeah, your suggestion is likely to work, but let's say you create a hidden <div class="mystyle"> and somwhere there's a style rule that says div: {color: green !important}, you'd still get inaccurate information.

quinlo Over a year ago

Of course, !important is very dangerous. Your answer is preferred, just thinking of alternatives that may work for OP depending on his use case.

Adam Smith · Accepted Answer · 2018-02-01 01:29:38Z

0

For any who might come after me:

One can indeed use window.getComputedStyle(element) on an element. However, creating your own element first (if one doesn't exist) comes with an important caveat. Firefox will properly calculate the computed style. However, Chrome (and possibly Safari too) won't calculate the style of an orphaned element that isn't part of the DOM tree. So if you go that route, be sure to add it to the tree somewhere, possibly as a hidden element.

answered Feb 1, 2018 at 1:29

Adam Smith

5611 gold badge10 silver badges26 bronze badges

Collectives™ on Stack Overflow

Getting a field from a named CSS style in Javascript

4 Answers 4

Comments

1 Comment

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related