We can get style property of an element via getComputedStyle()
but is there a way detect/track where this value was set from: user's CSS or system default or neither?
In this example only bakckground-color
is set by user's stylesheet, display
is set by "user agent stylesheet" (aka browser default) and width
is not set by anything, it's automatically generated:
console.log("backgroundColor", getComputedStyle(test).backgroundColor);
console.log("display", getComputedStyle(test).display);
console.log("width", getComputedStyle(test).width);
#test
{
background-color: lightblue;
}
<div id="test">test</div>
p.s. in DevTools there is a link to the stylesheet where the property is set:
and it shows which stylesheet sets the value: