javascript – 获取继承CSS规则的元素

2023年6月1日 122次阅读

在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,但我希望以编程方式获取它.

这是可能吗？

最佳答案 走向parentElement链,检查每个元素的css()值.具有parent().css()值的第一个元素是(可能)CSS规则选择器所针对的元素.

请参阅此小提琴以获取示例：http://jsfiddle.net/broofa/VPWV9/2/(请参阅console.log输出)

(注意：几乎肯定是复杂的情况,这将无法按预期工作,但对于所描述的情况,它的工作原理.)

点赞