获取inheritanceCSS规则的元素

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

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

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

例如，假设我有以下HTML：

和以下CSS：

 .parent { line-height: 20px; } 

在#myElement上调用css方法将返回20px ，但它不会表明它是从.parentinheritance的。

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

这是可能吗？

Answer 1

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

看一下这个小提琴的例子： http ： //jsfiddle.net/broofa/VPWV9/2/ （参见console.log输出）

（注意：几乎肯定很复杂的情况，这将无法按预期工作，但对于所描述的情况，它的工作原理。）

Answer 2

我对broofa有类似的解决方案。 它也有同样的问题。 这是小提琴：

http://jsfiddle.net/2w3kt/

---

 $.fn.getStyleParent = function(property) { var $source = this.get(0), // only do for 1st element :P srcVal = $source.css(property), $element = null; $(this).parents().each(function() { var $this = $(this); if( $this.css(property) == srcVal ) element = $this; else return false; // stops the loop }); return $element; }