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

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

我问的原因是因为使用jQuerycss方法,它将返回计算的样式,该样式继承了父对象的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,但我想检索元素 本身 的样式,而不是其父元素。

回答:

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

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

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

body {

color: red;

}

div + div {

color: red;

}

以及以下HTML:

<body>

<div>first</div>

<div>second</div>

</body>

无论firstsecond西港岛线显示为红色,然而,第一个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');

}

}

以上是 如何判断jQuery是否继承了特定的CSS属性? 的全部内容, 来源链接: utcz.com/qa/409618.html

回到顶部