文档样式表返回空值

Question

文档样式表返回空值

3

我正在使用CSS3动画将项目从一个屏幕边移动到另一个屏幕边。我希望确保该效果不受屏幕分辨率的影响。为此，我使用document.styleSheets 来访问包含所有动画关键帧的CSS文件，并更改它们的最终值。

这是我使用的JS代码：

var stylesheet = document.styleSheets[1];

var rules = stylesheet.rules;
var keyframes;
var keyframe;

for (var i = 0; i < rules.length; i++){
    keyframes = rules.item(i);

    var keyframeRules = keyframes.cssRules;
    var j = keyframeRules.length;
    var index = i+1;

    while (j--) {
        keyframe = keyframeRules.item(j);
        if (keyframe.keyText === "100%") {
            if(keyframe.style.left != ''){
                keyframe.style.left = $(document).width() + $('#cloud'+ index).width() + 'px';
            }
        }
    }

    $('#cloud'+ index).addClass('animating');
}

我正在使用的CSS文件包含以下内容：

@-moz-keyframes cloud1 {
0%{ left: -400px; }
100%{ left: 0; }
}

@-webkit-keyframes cloud1 {
0%{ left: -400px; }
100%{ left: 0; }
}

我有很多对关键帧。

我的问题是，如果我在控制台中使用console.log并在firebug中检查，document.styleSheets返回一个空的CSS文件。因此，rules.length为空。基于Webkit的浏览器没有任何问题。

我是否漏掉了一些显而易见的东西？

- boz

在 Firefox 中，似乎 .cssRules 可以工作而 .rules 不能。可以尝试这个方法。同时，也可以尝试使用 var stylesheet = document.styleSheets; 然后通过指定的索引访问 stylesheet 变量。 - Shahar

第二部分似乎只有一半起作用。它给了我两个CSS文件，但是如果我尝试使用索引访问第二个CSS文件，它再次什么也没给我。这是一个屏幕截图，如果我执行 console.log（document.styleSheets） ，firebug 给我的结果：http://i.stack.imgur.com/c8Omc.png - boz

规范说明该属性名为 cssRules。 - Boris Zbarsky

我遇到了一个类似的问题，其中 document.styleSheets.length 之前大约是 50，但在仅更改一个规则后，它变成了 4 左右（数字会有所不同）。这种情况发生在 Brave（Chromium 派生版）中。非常不一致。看起来像是一个 bug。 - donquixote

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Denys Séguret · Accepted Answer

不同的浏览器使用不同的名称来引用这些规则。

以下是我在代码中处理此问题的方式：

var cssRules = stylesheet.rules; // chrome, IE
if (!cssRules) cssRules = stylesheet.cssRules; // firefox (and maybe Chrome too in recent versions)

你可以这样做：

您可以按照以下步骤进行：

var cssRules = stylesheet.rules || stylesheet.cssRules;

但我更喜欢第一个版本，因为它更清晰易懂。