Can you get a style in JS without it being attached to a DOM element?

Question

Let's say I have this simple style:

   .element {
     width: 60px;
   }

But I have no DOM element with that class. Can I use pure JS to get that style? getComputedStyle() presupposes you are accessing a something the DOM has computed. If so, could someone explain which CSSOM element would be used to access it?

https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet — Mitya, Apr 29 '16 at 16:14
Whoa, a whole separate CSSOM?!? Can't believe I've made it this long without running into this. — serraosays, Apr 29 '16 at 16:23
http://stackoverflow.com/questions/324486/how-do-you-read-css-rule-values-with-javascript — Adam Buchanan Smith, Apr 29 '16 at 16:29

score 2 · Answer 1 · answered Apr 29 '16 at 16:26

2

Yes, we can access the styles if they are just included in html and may not be computed to any DOM element.

document.styleSheets provides array of styles sheets attached and we can parse those using loop.

Example: I have attached the example from this same page.

Please see this image for better understanding

answered Apr 29 '16 at 16:26

ravichandra reddy

209
1
5

So you access to CSSStylesheet.CSSRuleList.CSSStyleRule to get to the style? – serraosays Apr 29 '16 at 17:04
They are arrays .so try accessing them as arrays and not as objects. – ravichandra reddy Apr 29 '16 at 17:28

Can you get a style in JS without it being attached to a DOM element?

1 Answers1