如何判断jQuery是否inheritance了特定的CSS属性？
这是一个非常简单的问题，所以我会保持简短：
如何判断特定DOM元素的CSS属性是否被inheritance？
我问的原因是因为使用jQuery的css方法它会返回计算样式，它inheritance了父对象的CSS属性。 有没有办法检索对象本身设置的属性？
一个例子可以解释我得到的更好的东西：
CSS：
div#container { color:#fff; }
HTML：
Something that should be interesting Some other thing that should be interesting
因此，在inheritancecolor的div.black实例中，如何判断它是否被inheritance？
$('div.black:eq(0)').css('color')显然会给我#fff ，但我想要检索元素本身的样式，而不是它的父母。
要实际确定是否在元素本身上inheritance或设置了css样式，您必须实现浏览器应用的确切规则，以确定元素上特定样式的使用值。
您必须实现此规范 ，该规范指定如何计算计算值和使用值。
CSS选择器可能并不总是遵循可能简化问题的父子关系。 考虑这个CSS。
body { color: red; } div + div { color: red; }
和以下HTML：
first second
first和second显示为红色，但是，第一个div是红色的，因为它从父级inheritance它。 第二个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'); } }
我认为你不能判断给定的样式是否被inheritance，我认为你能做的最好的事情是将给定的CSS属性设置为“inherit”，捕获其计算值，并将其与原始值进行比较。 如果它们不同，那么样式绝对不会被inheritance。
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或通过内联样式，此方法将考虑inheritance。 在我看来，这并不理想，但它可能适合您的需求。 我担心完美的解决方案需要遍历整个样式表。
var $black = $('div.black:eq(0)'); alert($('').attr('class', $black.attr('class')).css('line-height') === $black.css('line-height'));
您可以使用相同的类（和我猜的ID）创建一个新元素，并检查CSS属性是否相同。
我知道这是一个老问题，但是我想我会分享我对Josh的回答所做的事情，即：修改它以删除css（如果它是inheritance的），并将其转换为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); }
如果您对样式与父元素的不同感兴趣，可以通过说$（’div.black：eq（0）’）。parent（）。css来查看给父母的css值。 （“线高度”）。 通过这种方式，您可以判断子项和父项是否具有相同的值。 然而，你可以从中收集到的是有限的。 孩子和父母都可能被明确分配了相同的东西！
如果你对级联的更复杂的结构感兴趣（例如你在firebug中看到的那样），那么对于只使用jQuery的你来说，我没有一个好的答案。 根据您想要的特定信息（例如像其他人建议的那样克隆对象，或者切换类并检查切换的效果），您可以执行一些效率低下的黑客攻击，但这让我感到不安只是想到它！
正如我想有人指出的那样，vanilla JS确实允许你检查特定样式项的属性; 所以也许混合使用jQuery和vanilla JS会得到你需要的东西吗？
查看http://developer.apple.com/internet/webcontent/styles.html以查看可让您访问样式表信息的JavaScript。 AFAIK这不是jQuery的“开箱即用”类型的东西（可能完全错了）。 也就是说，如果您愿意遍历样式表信息，应该是可能的。
编辑：根据原始问题的示例代码删除了一些内容
JS（不是jQuery）element.style属性返回一个CSSStyleDeclaration对象，因此：
{parentRule: null, length: 0, cssText: "", alignContent: "", alignItems: ""…
如果您感兴趣的样式具有值，则它在元素级别声明（或由JS应用），否则inheritance。
该信息来自https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
我正在努力使用HTML5 Dnd在元素级别（li）添加display：list-item并打破另一个隐藏/显示filterfunction; 我能够以这种方式修复它。
我的具体代码是：
// 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 }
我认为，这是jquery的好行为。 当$('div.black:eq(0)').css('line-height')或undefined时你想得到什么？ 这是如此令人困惑，因为line-height （inheritance，是）的实际值是1 em。