如何判断特定的CSS属性是否是用jQuery继承的？
这是一个非常简单的问题，所以我将非常简短：
如何判断特定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，但是我想检索元素本身的样式，而不是它的父元素。
回答 7
Stack Overflow用户
发布于 2011-02-15 06:24:10
要实际确定css样式是继承还是设置在元素本身上，您必须实现浏览器应用的确切规则来确定元素上特定样式的使用值。
您必须实现这个等级库，它指定计算和使用的值是如何计算的。
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');
}
}Stack Overflow用户
发布于 2011-02-15 06:07:15
我认为您无法判断给定的样式是否是继承的，我认为最好的方法是将给定的CSS属性设置为“继承”，捕获其计算值，并将其与原始值进行比较。如果他们是不同的，风格肯定不是继承的。
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.");基于jsFiddle的演示
要点是:如果在CSS中或通过内联样式将div.black设置为#fff，则此方法将考虑继承它。在我看来，这并不理想，但它可能适合你的需要。恐怕一个完美的解决方案需要遍历整个样式表。
Stack Overflow用户
发布于 2011-02-15 06:05:54
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属性是否相同。
https://stackoverflow.com/questions/5000108
复制相似问题
腾讯云开发者
