可以检测一个元素的样式是否只是浏览器的默认值而不是由样式表或内联样式设置？

Question

我的javascript包含在X的网站中，但我对她的网站或其中包含的内容没有任何其他控制权。 如果她的样式是#element ，我想不管它，但如果她没有，我有一个样式表，我会注入<head> 。 有没有办法检测她是否有样式？

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

任何方式javascript / jquery /其他框架来告诉一个样式的CSS特异性将回答这个并且令人难以置信。

Answer 1

知道是否存在对元素进行样式化的直接但不完美的方法是检查元素的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可能会更容易。

您还可以始终包含样式表，用户可以通过加载自定义样式表来覆盖样式。

Answer 2

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

对于样式表应用的CSS规则，我建议你看一下“ 是否有可能检查某些CSS属性是否在使用Javascript的样式标记内定义？ ”它与你提出的内容非常相似。

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

可以检测一个元素的样式是否只是浏览器的默认值而不是由样式表或内联样式设置？

问题描述

2 个解决方案

解决方案1
0 2013-04-09 00:41:10

解决方案2
0 2013-04-09 01:29:35

可以检测一个元素的样式是否只是浏览器的默认值而不是由样式表或内联样式设置？

问题描述

2 个解决方案

解决方案1 0 2013-04-09 00:41:10

解决方案2 0 2013-04-09 01:29:35

解决方案1
0 2013-04-09 00:41:10

解决方案2
0 2013-04-09 01:29:35