In Chrome, I can inspect an element, view its computed styles, and for each property, see not only the computed value, but a link to the stylesheet from which it came (see screenshot).
The question: how might I obtain that same stylesheet reference programmatically?
Note that I use Chrome here for illustrative purposes only. A browser-independent answer would be excellent, but I’ll gladly accept any (scriptable) solution I can run via Chrome, Firefox, Edge, or Safari.
stylesheet link for computed value, via Developer Tools UI
I know I can get to all stylesheets and rules by iterating over document.styleSheets
. But that doesn’t indicated which of them “won” (provided the final computed value) for any given element and property.
I’ve also looked at Window.getComputedStyle()
and Element.computedStyleMap()
. These indicate the winning rules and values, but (far as I can tell) don’t make any reference to the parent stylesheet.
Many thanks in advance!
Nutt
J Nutt is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.