2

I'm trying to find a way to extract all css rules from any given element (I have full access to the html, and css).

I have look into other solutions such as getComputedStyle, however, it doesn't help much with certain properties such as width or height. For example, I expect it to return width: 100% when applicable, but it always return the real width value in px. What I need is the CSS rule definition, not how it is actually rendered on the browser.

My last resort is to use some css-inliner such as juicejs then I can access the element.style.prop, but I think if these js inliners can turn css rules to inline css then they must have extracted the css rules along the way already? I tried to look into its source but if there is any module out there doing the job it would be much better than trying to extract the code from that library.

mr1031011
  • 3,574
  • 5
  • 42
  • 59
  • 2
    Does this answer your question? https://stackoverflow.com/a/46828497/5605822 – Tasos Sep 25 '20 at 09:12
  • 2
    or this? https://stackoverflow.com/a/324533/5605822 – Tasos Sep 25 '20 at 09:13
  • Does this answer your question? [Get CSS not-computed property-value with Javascript only](https://stackoverflow.com/questions/46828223/get-css-not-computed-property-value-with-javascript-only) – Paul Sep 25 '20 at 09:13
  • I'm testing all solutions you sent, will reply right back asap – mr1031011 Sep 25 '20 at 10:24
  • What I want is to pass the element object in and get the extracted css back, I found this one which is very close to what I need but it has some issues with new node version, I'm checking to see what I can do about it: https://github.com/jonkemp/inline-css/tree/master/packages/extract-css – mr1031011 Sep 25 '20 at 11:04
  • Okie, so just to update at the moment: I ended up with using the inline css plugin, I could turn the rule to inline css, then use element.style.prop to get the defined rule. I'm not entirely happy because inline css does not work with media query and pseudo state selector. I will update this once I find a better solutin. – mr1031011 Sep 25 '20 at 13:14
  • I found this one, if it works it is what I want: https://stackoverflow.com/questions/2952667/find-all-css-rules-that-apply-to-an-element – mr1031011 Sep 25 '20 at 14:02

1 Answers1

3

It amazes me that there are not many solutions available for this issue. I ended up finding 2 solutions that both work (there are probably some edge cases but I have not encountered yet)

Option 1: A getMatchedCSSRules implementation posted here: https://stackoverflow.com/a/37958301/821517

Pros: short and concise

Cons: does not support pseudo selectors (yet)

Option 2: A very all library called CSSUtilities mentioned here: https://stackoverflow.com/a/12023174/821517

Pros: it can handle pseudo selectors

Cons: very very old library which relies on another library that is deprecated.

I ended up using CSSUtilities and I had to make some changes (hacks) to make it work with the new js engines. I post both modified files here in hope that it will help others (and that errors I made can be spotted and suggested with fixes)

  1. New files: https://gist.github.com/yellow1912/c9dbbab97497ec42489be55e8abe73c7
  2. Please ensure that you visit this link to download the package which contains the document file: http://www.brothercake.com/site/resources/scripts/cssutilities/
mr1031011
  • 3,574
  • 5
  • 42
  • 59
  • Thanks a lot for creating that gist - and updating it! The download link is broken on the official site and it would be a shame if this gets lost. I think you can skip `Selector.js` since the `api` option is `false` by default so the browser will fall back to its own selector API. This used to be required to support really old browsers but is not needed these days. – volt Dec 29 '20 at 02:19