是否可以检测元素的样式是否只是浏览器默认样式，还是由样式表或内联样式设置？答案

【问题标题】：Can one detect if an element's style is just the browser default vs. is set by a stylesheet or inline styles?是否可以检测元素的样式是否只是浏览器默认样式，还是由样式表或内联样式设置？
【发布时间】：2013-03-31 06:05:36
【问题描述】：

我的 javascript 包含在 X 的站点中，但我对她的站点或包含它的位置没有任何其他控制权。如果她的样式是#element，我想不管它，但如果她没有，我有一个样式表，我会在<head> 中注入。有没有什么方法可以检测出她是不是装的？

检查它的高度是 0 还是 1 失败，因为它有一些内容并且浏览器会做出默认决定。

javascript/jquery/其他框架告诉 CSS 样式的特殊性的任何方式都可以回答这个问题并且令人难以置信。

【问题讨论】：

你不能只用一个类来限定你的风格，在包含页面上包装你的插件的元素必须使用吗？这将需要最终用户进行更改，但这是一个小问题并且是一个干净的解决方案。
相关：stackoverflow.com/a/1020560/2129835

标签： javascript css web-applications

【解决方案1】：

对于内联样式，这很简单：您只需访问element.style 对象并检查您想要的属性——或者使用element.hasAttribute('style') 来检查该属性是否在HTML 中定义。

对于样式表应用的 CSS 规则，我建议您看一下“Is it possible to check if certain CSS properties are defined inside the style tag with Javascript?”，它与您的要求非常相似。

如果您想过滤掉任何通用规则（如标记规则），使用那里描述的方法也很容易过滤只有 #element 选择器的规则。

【讨论】：

【解决方案2】：

了解元素是否有意设置样式的一种直接但不完美的方法是检查元素的style 属性是否有值，或者元素的class 属性是否已设置。

http://jsfiddle.net/YbSpc/

HTML

<div id="test_unstyled"></div>
<div id="test_styled" style="background-color: red;" class="something"></div>

var unstyled = document.getElementById('test_unstyled'),
    styled = document.getElementById('test_styled');

console.log('test_unstyled is styled?', !!(unstyled.getAttribute('style') || unstyled.className));
console.log('test_styled is styled?', !!(styled.getAttribute('style') || styled.className));

但是，此解决方案不会检测通过 CSS 选择器应用的任何样式。如果您想考虑这些，您可能必须找出浏览器应用的所有默认样式并对其进行检查，但这将很难维护，我不建议您尝试实施这种方法，除非您是愿意为此目的开发和维护一个库。

如果您要发布其他人可能会使用的插件，那么实现API 可能会更容易，这将允许插件的客户端决定是否要应用插件样式。

您也可以始终包含您的样式表，并且用户将能够通过加载他们的自定义样式表来覆盖样式。

【讨论】：

不错的尝试，但是当使用元素选择器定义样式时，您的解决方案会失败：jsfiddle.net/tqn4A
@ThomasC.G.deVilhena，非常正确，我已经相应地修改了答案。