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

Can one detect if an element's style is just the browser default vs. is set by a stylesheet or inline styles?

本文关键字：样式 设置 默认 检测 元素 是否 浏览器      更新时间：2023-09-26

我的javascript包含在X的站点中，但我对她的站点或她包含它的位置没有任何其他控制。如果她的样式是#element，我想让它单独存在，但如果她没有，我有一个样式表，我将在<head>中注入。有什么方法可以检测出她是否设计过吗?

检查它的高度是0或1失败，因为它有一些内容在里面，浏览器做出默认的决定。

对于javascript/jquery/其他框架来说，任何一种告诉CSS样式特异性的方法都将回答这个问题，并且是不可思议的。

对于内联样式，这很容易:您可以访问element.style对象并检查您想要的属性-或使用element.hasAttribute('style')来检查该属性是否在HTML中定义。

对于样式表应用的CSS规则，我建议你看一下"是否有可能检查某些CSS属性是否在Javascript的样式标签内定义?"，这与你的问题非常相似。

使用这里描述的方法，如果您想过滤掉任何通用规则(如标记规则)，也可以很容易地过滤掉只有#element选择器的规则。

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

http://jsfiddle.net/YbSpc/

HTML 

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

JS 

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可能会更容易，这将允许插件的客户端决定他们是否想要应用插件样式。

你也可以总是包含你的样式表，用户将能够通过加载他们的自定义样式表来覆盖样式。

相关文章：