Question

假设我有

HTML

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

CSS

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

如何获取元素并确定其color样式属性是否是匹配直接CSS规则或继承的结果？

// 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) {
  ...?
}

使用JS，我：

可以使用Hello!确定标记（baz）中文字（getComputedStyle）的有效颜色。
通过选中element.style.color，可以判断样式是否使用样式属性直接应用于HTML。
无法判断确定样式的规则是直接应用于元素还是元素继承了规则。

如果可以详尽枚举CSS规则，我可以对定义element.matches/matchesSelector的每个CSS规则使用color。但由于CSS规则可以在任何地方设置（外部样式表，内联样式标记，元素样式属性等），因此很难枚举可能影响元素的所有CSS规则。

最初加载页面的代码（HTML / CSS）无法更改，但可以使用JS自由操作。

加成

有没有办法找出哪个元素baz继承了它的颜色？

Answer 1

您可以使用window.document.styleSheets[i].rules来获取CSS规则。您可以获得selectorText，style或完整cssText。有关如何使用此信息的信息：https://stackoverflow.com/a/27527462/804495

所有样式表，无论是<link>还是<style>都包含在内，都位于window.document.styleSheets。但是，这将不获取元素样式。

要解决此问题，您可以对提到的元素使用getComputedStyle。如果一个元素的样式声明不在styleSheets中，那么你知道它是一个内联style= CSS规则，可以直接应用，也可以通过它的祖先链。

有没有办法找出baz从哪个元素继承颜色？

这是可能的。要找出它继承自哪个元素，您必须遍历父元素;但是，基于CSS声明的工作方式，这应该是详尽无遗的。

Answer 2

使用浏览器开发者工具。大多数现代浏览器都有开发人员工具来帮助您调试CSS，JavaScript，网络问题。按F12键启动Chrome，firefox（firebug插件）和IE浏览器。

http://developer.chrome.com/devtools

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

确定是否有任何CSS规则直接修改了元素的样式

2 个答案: