Question

这是一个非常简单的问题，所以我会保持简短：

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

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

一个例子可能会解释我的情况会更好：

CSS：

css

HTML：

div#container {
  color:#fff;
}

因此，在继承<div id="container"> Something that should be interesting <div class="black"> Some other thing that should be interesting </div> </div>的{{1}}实例中，如何判断它是否被继承？

div.black显然会给我color，但我想要检索元素本身的样式，而不是它的父母。

Answer 1

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

您必须实现此spec，指定计算和使用的值的计算方式。

CSS选择器可能并不总是遵循可能简化问题的父子关系。考虑一下这个CSS。

body {
    color: red;
}

div + div {
    color: red;
}

以及以下HTML：

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

first和second都会显示为红色，但是，第一个div是红色的，因为它从父级继承它。第二个div是红色的，因为div + div CSS规则适用于它，更多是特定的。看着父母，我们会看到它有相同的颜色，但这不是第二个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');
    }
}

Answer 2

我认为你不能判断给定的样式是否被继承，我认为你能做的最好的事情是将给定的CSS属性设置为“inherit”，捕获其计算值，并将其与原始值进行比较。如果它们不同，那么样式肯定是不继承。

var el = $('div.black:eq(0)');
var prop = el.css("color");
el.css("color", "inherit");
var prop2 = el.css("color");
el.css("color", prop);
if(prop != prop2)
  alert("Color is not inherited.");

Demo on jsFiddle

关键在于：如果在CSS中或通过内联样式将div.black设置为#fff，则此方法将考虑继承。在我看来，这并不理想，但它可能适合您的需求。我担心完美的解决方案需要遍历整个样式表。

Answer 3

http://jsfiddle.net/k7Dw6/

var $black = $('div.black:eq(0)');
alert($('<div>').attr('class', $black.attr('class')).css('line-height') === $black.css('line-height'));

您可以创建一个具有相同类（和我猜的ID）的新元素，并检查CSS属性是否相同。

Answer 4

我知道这是一个古老的问题，但我想我会分享我对Josh的回答所做的事情，即：修改它以删除css，如果它是继承的，并转向它成为一个jQuery插件。请随意拍下来，但到目前为止它对我有用： - ）

$.fn.isInheritedStyle = function(style) {
    var current = this.css(style);
    this.css(style, 'inherit');
    var inherited = this.css(style);
    if (current == inherited)
        this.css(style, '');
    else
        this.css(style, current);
    return (current == inherited);
}

Answer 5

如果您对样式与父元素的不同感兴趣，可以通过说$（'div.black：eq（0）'）来查看已经给父母的css值。）的CSS（“线高度”）。通过这种方式，您可以判断子项和父项是否具有相同的值。然而，你可以从中收集到的是有限的。可能已经明确地为孩子和父母分配了相同的东西！

如果你对更复杂的级联结构感兴趣（例如你可以在firebug中看到的那样），那么对于只使用jQuery的你来说，我没有一个好的答案。根据你想要的具体信息，你可以执行一些效率低下的黑客攻击（比如像其他人建议的那样克隆对象，或者切换类和检查切换的效果），但这让我很难过只是想着它！

正如我想有人指出的那样，vanilla JS确实允许你检查特定样式项的属性;所以也许混合使用jQuery和vanilla JS会得到你所需要的东西吗？

查看http://developer.apple.com/internet/webcontent/styles.html以查看可让您访问样式表信息的JavaScript。 AFAIK这不是jQuery的“开箱即用”类型的东西（完全可能是错的）。也就是说，如果您愿意遍历样式表信息，那应该是可能的。

修改：根据原始问题的示例代码

删除了一些内容

Answer 6

JS（不是jQuery）element.style属性返回一个CSSStyleDeclaration对象：

{parentRule: null, 
length: 0, 
cssText: "", 
alignContent: "", 
alignItems: ""…

如果您感兴趣的样式具有值，则它在元素级别声明（或由JS应用），否则继承。
信息来自https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

我正在努力使用HTML5 Dnd在元素级别（li）添加display：list-item并打破另一个隐藏/显示过滤器功能;我能够这样修理它。
我的具体代码是：

// browser bug? it adds display:list-item to the moved elements, this
// loops clear the explicit element-level "display" style
var cols = $('#columnNames li');
for( var icol = 0; icol < cols.length; icol++) {
    var d = cols[icol].style; // the CSSStyleDeclaration 
    d.display = ""; // clear the element-level style
}

Answer 7

我认为，这是jquery的好行为。在$('div.black:eq(0)').css('line-height')，false或undefined时你想得到什么？这是如此令人困惑，因为line-height（继承，是）的实际值是1 em。

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

7 个答案: