获取继承 CSS 规则的元素答案

【问题标题】：Get element from which CSS rule is being inherited获取继承 CSS 规则的元素
【发布时间】：2011-11-07 03:47:54
【问题描述】：

在 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，但我想以编程方式获取它。

这可能吗？

【问题讨论】：

这将帮助您查看帖子stackoverflow.com/questions/5000108/…
@pranay vadel：这会告诉我是否它是继承的，而不是从哪里继承的......
也许你应该看看code of Firebug，看看它是如何完成的。 Firebug 是用 JavaScript 编写的……
查看 Firebug 源代码是一个不错的建议，但代码肯定不平凡。我还担心它可能是特定于 Firefox 的，或者（更糟糕的是）依赖于仅适用于 XUL 应用程序（如 Firebug）的本机 API。也就是说，我已经将其追踪到 css.js (goo.gl/ahF90) 中 getElementRules() 函数中的“覆盖”逻辑，但没有时间进一步研究。

标签： javascript jquery inheritance css

【解决方案1】：

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

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

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

【讨论】：

如果子级应用了与父级相同的样式：.parent, .child { color: red } 怎么办？您的代码会声称该值是继承的！
正如我所说，在某些复杂的情况下，此代码将不起作用。 :) 我想可能有一个基于对文档样式表的分析的解决方案，（例如，为每个 CSS 规则拉出选择器，使用 jquery 检查每个规则所针对的元素等），但我很确定这样的解决方案将非常复杂，计算成本很高，而且不太可能更可靠。
好吧，我想我只需要满足于我得到的东西:(

【解决方案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;
}

【讨论】：