我需要检查是否存在 CSS 规则，因为如果不包含 CSS 文件，我想发出一些警告。
最好的方法是什么？
我可以过滤 window.document.styleSheets.cssRules，但我不确定这是如何跨浏览器的（另外我在 Stack Overflow 上注意到 styleSheet[0] 的对象为空）。
我还希望将依赖项保持在最低限度。
有没有一种简单的方法可以做到这一点？我只需要创建匹配的元素并测试效果吗？
编辑：如果不是，检查window.document.styleSheets的跨浏览器问题是什么？
【问题讨论】：
标签： javascript css dom cross-browser
我不知道这是否适合您，但如果您要检查的是单个文件，那么您可以编写错误消息并切换样式以将其隐藏在该文件中。
<span class="include_error">Error: CSS was not included!</span>
CSS 文件：
.include_error {
display: none;
visibility: hidden;
}
【讨论】：
.css-file-loaded-marker { z-index: -98256; } 和$('<p>').addClass('css-file-loaded-marker').css('z-index') == -98256 我不知道这实际上是如何跨浏览器的，所有浏览器都支持这样的z-indicies吗？是否都将 css 应用于分离的元素？
我使用 javascript 测试正确的 CSS 安装。
我的样式表中有一条 CSS 规则，将特定 id 设置为 position: absolute。
#testObject {position: absolute;}
然后我以编程方式创建一个具有可见性的临时 div：使用该 ID 隐藏并获取计算的样式位置。如果不是absolute，则没有安装所需的CSS。
如果您不能将自己的规则放入样式表中，那么您可以确定一个或多个您认为代表样式表且不太可能更改的规则，并设计一个应获取这些规则并进行测试的临时对象以这种方式存在。
或者，最后，您可以尝试枚举所有外部样式表并查找包含的特定文件名。
这里的重点是，如果您想查看是否包含外部样式表，您必须选择您可以查找的有关该样式表的一些内容（文件名或其中的某些规则或它引起的某些影响）。
【讨论】：
这就是我得到的有效方法。它类似于@Smamatti 和@jfriend00 的答案，但更加充实。我真的希望有一种方法可以直接测试规则，但是哦。
CSS：
.my-css-loaded-marker {
z-index: -98256; /*just a random number*/
}
JS：
$(function () { //Must run on jq ready or $('body') might not exist
var dummyElement = $('<p>')
.hide().css({height: 0, width: 0})
.addClass("my-css-loaded-marker")
.appendTo("body"); //Works without this on firefox for some reason
if (dummyElement.css("z-index") != -98256 && console && console.error) {
console.error("Could not find my-app.css styles. Application requires my-app.css to be loaded in order to function properly");
}
dummyElement.remove();
});
【讨论】：
我会在您的 jquery 小部件中使用这样的 css 选择器。
$('link[href$="my-app.css"]')
如果您返回结果，则表示有一个链接元素的 href 以“my-app.css”结尾
接下来使用此函数来验证您所依赖的元素上的特定 css 属性。我会建议一些特定于你的样式，比如容器的宽度，而不是随机的，比如 -9999 zindex
var getStyle = function(el, styleProp) {
var x = !!el.nodeType ? el : document.getElementById(el);
if (x.currentStyle)
var y = x.currentStyle[styleProp];
else if (window.getComputedStyle)
var y = document.defaultView.getComputedStyle(x, null).getPropertyValue(styleProp);
return y;
}
这样
getStyle($('#stats-container')[0], "width")
或
getStyle("stats-container", "width")
【讨论】：
如果您担心无法编辑其他人的样式表，您可以通过自己的样式表代理他们，使用import
@import url('http://his-stylesheet.css');
.hideErrorMessage{ ... }
如果您只想知道您的代码是否正在尝试加载样式表，这已经足够了，但如果您需要知道是否正确加载了外部样式表，这将无济于事。
【讨论】：