Extract CSS rules from any given element

Question

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.

Does this answer your question? stackoverflow.com/a/46828497/5605822 — Tasos
– Tasos, Commented Sep 25, 2020 at 9:12
Does this answer your question? Get CSS not-computed property-value with Javascript only — user1945782
– user1945782, Commented Sep 25, 2020 at 9:13
I'm testing all solutions you sent, will reply right back asap — mr1031011
– mr1031011, Commented Sep 25, 2020 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: github.com/jonkemp/inline-css/tree/master/packages/extract-css — mr1031011
– mr1031011, Commented Sep 25, 2020 at 11:04

mr1031011 · Accepted Answer · 2020-09-25 16:50:03Z

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)

New files: https://gist.github.com/yellow1912/c9dbbab97497ec42489be55e8abe73c7
Please ensure that you visit this link to download the package which contains the document file: http://www.brothercake.com/site/resources/scripts/cssutilities/

answered Sep 25, 2020 at 16:50

mr1031011

3,8428 gold badges46 silver badges61 bronze badges

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

1 Comment

volt Over a year ago

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.

Collectives™ on Stack Overflow

Extract CSS rules from any given element

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related