6

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

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

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

4

2 回答 2

1

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

对于样式表应用的 CSS 规则，我建议您看一下“是否可以使用 Javascript 检查是否在样式标签内定义了某些 CSS 属性？ ”这与您的要求非常相似。

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

于 2013-04-09T01:29:35.087 回答
0

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

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

于 2013-04-09T00:41:10.247 回答