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上调用#myElement方法将返回20px，但不会表明它是从.parent继承的。

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

这一切都可能吗？

Answer 1

走上parentElement链，检查每个元素的css（）值。第一个元素与父（）。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;
}

获取继承CSS规则的元素

2 个答案: