如何判断jQuery是否继承了特定的CSS属性？

一尘不染

如何判断jQuery是否继承了特定的CSS属性？

css

这是一个非常简单的问题，因此我将对其进行简短介绍：

如何判断特定DOM元素的CSS属性是否被继承？

我问的原因是因为使用jQuery的css方法，它将返回计算的样式，该样式继承了父对象的CSS属性。有没有办法检索在对象本身上设置的属性？

一个例子可以解释我的进步：

CSS：

div#container {
  color:#fff;
}

HTML：

<div id="container">
  Something that should be interesting
  <div class="black">
    Some other thing that should be interesting
  </div>
</div>

因此，在div.black继承的实例中，color如何判断它是否被继承了？

$('div.black:eq(0)').css('color')显然会给我#fff，但我想检索元素本身的样式，而不是其父元素。

阅读 410

2020-05-16

共1个答案

一尘不染

要实际确定css样式是继承还是设置在元素本身上，您必须实现浏览器应用的确切规则，以确定元素上特定样式的使用值。

您将必须实现此规范，该规范指定如何计算计算值和使用值。

CSS选择器可能并不总是遵循父子关系，这可能简化了事情。考虑一下这个CSS。

body {
    color: red;
}

div + div {
    color: red;
}

以及以下HTML：

<body>
    <div>first</div>
    <div>second</div>
</body>

无论first和second西港岛线显示为红色，然而，第一个div是红色的，因为它继承父它。第二个div是红色的，因为div + divCSS规则适用于它，这更具体。看一下父级，我们会看到它具有相同的颜色，但这不是第二个div从中获取它的地方。

浏览器除了getComputedStyle界面之外，不公开任何内部计算。

一个简单但 有缺陷的 解决方案是遍历样式表中的每个选择器，并检查给定元素是否满足选择器。如果是，则假定
样式直接应用于元素。假设您想浏览第一个样式表中的每个样式，

var myElement = $('..');
var rules = document.styleSheets[0].cssRules;
for(var i = 0; i < rules.length; i++) {
    if (myElement.is(rules[i].selectorText)) {
        console.log('style was directly applied to the element');
    }
}

2020-05-16