如何检查css规则是否存在

Question

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

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

我可以过滤window.document.styleSheets.cssRules,但我不确定这是什么跨浏览器(加上我在Stack Overflow上注意到该对象为null 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

这是我得到的有效方法。它与@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();
});