如何检查CSS规则是否存在

Question

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

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

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

我还想将依赖性保持在最低限度。

有没有一种简单的方法可以做到这一点？我只需要创建匹配的元素并测试效果吗？

编辑：如果没有，检查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。

---

如果您无法将自己的规则放入样式表中，那么您可以识别一个或多个您认为代表样式表且不太可能更改的规则，并设计一个临时对象来获取这些规则并测试它们的存在那样。

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

这里的要点是，如果您想查看是否包含外部样式表，则必须选择可以查找的有关该样式表的内容（文件名或其中的某些规则或它引起的某些效果）。

Answer 3

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

我会在 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 5

如果您担心无法编辑其他人的样式表，您可以使用 import 通过您自己的样式表代理它们，

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

如果您只想知道您的代码是否正在尝试加载，这就足够了样式表，但如果您需要知道外部样式表是否已正确加载，则无济于事。