获取从中继承 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;
}

调用css方法 on#myElement将返回20px，但不会表明它是从 继承的.parent。

我知道我可以只火了Web Inspector/ Dev Tools/ Firebug，但我想要得到它编程。

这是可能吗？

Answer 1

沿着parentElement 链向上检查每个元素的css() 值。第一个具有不同的parent().css() 值的元素（可能）是CSS 规则选择器的目标元素。

请参阅此小提琴的示例：http://jsfiddle.net/broofa/VPWV9/2/（请参阅 console.log 输出）

（注意：几乎可以肯定，在复杂的情况下，这不会按预期工作，但对于所描述的情况，它是有效的。）