CODEWITHSUNDEEP
javascripthtmlcsscomputed-style
Jan Stanicek
Jan Stanicek

Reputation: 1281

Retrieve chain of overrided computed styles

I would like to analyze pages and detect elements which has some overriden styling.

I have limited collection of elements which I want to investigate.

I have started with fetching computedStyles for each of those elements where I would expect similar output as in Chrome DeveloperTools:

let computedStyles = window.getComputedStyle(document.getElementById("testing-element"));

but there is only single CSSStyleDeclaration instance which represents only result collection of styling.

Instead I would like to see something like this for single style (e.g. font-size):

font-size:  24px;
---
24px        .error-page-title         myCustom.css
22px        h1                        common.css
2.42857rem  h1                        master.css
2em         h1                        user agent stylesheet

Now I would be able to determine which element has overriden font-size by other css (or direct element style attribute) than master.css or common.css.

Such information is visible in DevTools in chrome, but I need to automatize it to collect some report.

Or is there any working tool which will provide this functionality?

Upvotes: 0

Views: 113

Answers (0)

Related Questions