1

Suppose I have

HTML

<foo>
  <bar>
    <baz>Hello!</baz>
  </bar>
</foo>

CSS

foo {
  color: red;
}
bar {
  color: red;
}

How can I take an element and determine whether its color style attribute was the result of matching a direct CSS rule or by inheritance?

// foo -> true - the first CSS rule directly applied a color to this element.
// bar -> true - the second CSS rule directly applied a color to this element.  It didn't change the color that would have been inherited, but that's ok.
// baz -> false - The color in this element is purely inherited.
function isColorSetDirectly(DOMElement) {
  ...?
}

Using JS, I:

  • Can determine the effective color of text (Hello!) in a tag (baz) using getComputedStyle.

  • Can tell if a style was applied directly with HTML using the style attribute by checking element.style.color.

  • Can't tell if the rule that determined the style was directly applied to the element or if the element inherited the rule.

If CSS rules could be exhaustively enumerated, I could use element.matches/matchesSelector for every CSS rule that defines color. But since CSS rules can be set anywhere (external stylesheet, inline style tag, element style attribute, etc.) it seems difficult to enumerate all CSS rules that could affect an element.

The code initially loaded with the page (HTML/CSS) can't be changed but may be freely manipulated with JS.

Bonus

Is there a way to find out which element baz is inheriting its color from?

arcyqwerty
  • 10,325
  • 4
  • 47
  • 84

2 Answers2

3

You can use window.document.styleSheets[i].rules to get CSS rules. You can get the selectorText, style, or the full cssText. For info on how to use this: https://stackoverflow.com/a/27527462/804495

All stylesheets, regardless of if it was included via <link> or <style> will be in window.document.styleSheets. However, this will not get element style.

To resolve this, you can use getComputedStyle on an element as you mentioned. If an element has a style declaration that is not in any of the styleSheets, then you know it is an inline style= CSS rule, either applied directly or through its ancestor chain.

Is there a way to find out which element baz is inheriting its color from?

It's possible. To find out which element it is inherited from, you will have to iterate through the parent elements; however based on the way CSS declarations work this should be exhaustive.

Community
  • 1
  • 1
apscience
  • 7,033
  • 11
  • 55
  • 89
  • I assume style properties would also have to be checked up the element's ancestor chain as well? – arcyqwerty Dec 01 '15 at 22:55
  • @arcyqwerty yes, for example if the text color was inherited from a parent/ancestor element that had it set via `style` attribute, you would need to check those as well to catch it. And as for examining the actual stylesheet rules, you will have to factor in not only order, but specificity as well. – CBroe Dec 01 '15 at 22:59
  • Is there a better approach for determining the rule that applied to an element than the one I outlined in my question? – arcyqwerty Dec 01 '15 at 23:01
  • And also be aware, that even such inline styles can themselves get overwritten again from the stylesheets, by using a combination of the attribute selector and `!important`, like so: `someelement[style] { color:red !important; }` – CBroe Dec 01 '15 at 23:02
  • 1
    @arcyqwerty: I'm looking but unable to find any so far. This seems like a good project for a library, though! – apscience Dec 01 '15 at 23:06
0

Use browser developer tools. Most modern browser has developer tools to help you debug CSS, javascript, network problems. Press F12 to start in Chrome, firefox (firebug plugin) and IE.

http://developer.chrome.com/devtools

http://msdn.microsoft.com/en-us/library/dd565628(v=vs.85).aspx

Quickpick
  • 163
  • 6