Question

我需要检查是否存在CSS规则，因为如果不包含CSS文件，我想发出一些警告。

这样做的最佳方式是什么？

我可以通过window.document.styleSheets.cssRules进行过滤，但我不确定这是什么跨浏览器（另外我在Stack Overflow上注意到styleSheet[0]对象为空）。

我还希望将依赖关系保持在最低限度。

有直接的方法吗？我是否只需创建匹配元素并测试效果？

修改：如果没有，检查window.document.styleSheets的跨浏览器问题是什么？

Answer 1

我不知道这是否适合您，但如果您要检查的是单个文件，则可以编写错误消息并切换样式以将其隐藏在该文件中。

<span class="include_error">Error: CSS was not included!</span>

CSS文件：

.include_error {
    display: none;
    visibility: hidden;
}

Answer 2

我使用javascript测试正确的CSS安装。

我的样式表中有一个CSS规则，它将特定的id设置为position：absolute。

#testObject {position: absolute;}

然后我以编程方式创建一个具有可见性的临时div：使用该ID隐藏并获取计算出的样式位置。如果它不是absolute，则表示未安装所需的CSS。

如果您不能将自己的规则放在样式表中，那么您可以确定一个或多个您认为代表样式表的规则，并且不太可能更改和设计应该获得这些规则和测试的临时对象因为他们的存在。

或者，最后，您可以尝试枚举所有外部样式表并查找包含的特定文件名。

这里的要点是，如果你想查看是否包含外部样式表，你必须选择一些你可以查找的样式表（文件名或其中的一些规则或它引起的效果）。< / p>

Answer 3

我会在你的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")

Answer 4

这就是我的工作原理。它类似于@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();
});

Answer 5

如果您担心无法编辑其他人的样式表，可以使用import

通过自己的样式表代理它们

@import url('http://his-stylesheet.css');
.hideErrorMessage{ ... }

如果你只是想知道你的代码是否正在尝试加载样式表，但是如果你需要知道是否正确加载了外来样式表，这就足够了。

如何检查是否存在css规则

5 个答案: