javascript - 获取从中继承 CSS 规则的元素

Question

在 jQuery 中，我们可以使用 css 方法轻松获取给定元素的 CSS 值:

$('#myElement').css('line-height'); // e.g. '16px'

现在，由于这个 CSS 值可能是从父元素继承的，有没有办法知道哪个元素应用了这个规则？

例如，假设我有以下 HTML:

<div class="parent">
    <div id="myElement"></div>
</div>

和以下 CSS:

.parent {
    line-height: 20px;
}

在#myElement上调用css方法会返回20px，但不会表示继承自.parent 。

我知道我可以启动 Web Inspector/Dev Tools/Firebug，但我想以编程方式获取它。

这有可能吗？

Answer 1

沿着 parentElement 链向上走，检查每个元素的 css() 值。具有不同 parent().css() 值的第一个元素(可能)是 CSS 规则选择器所针对的元素。

有关示例，请参阅此 fiddle :http://jsfiddle.net/broofa/VPWV9/2/ (查看 console.log 输出)

(注意:几乎可以肯定，在某些复杂情况下，这不会按预期工作，但对于所描述的情况，它可以工作。)