2

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; }
}

そこにはかなりの数のキーフレームのペアがあります。

私の問題は、firebugで検査するとdocument.styleSheets、空のcssファイルが返されるconsole.logことです。結果として、rules.lengthはnullになります。Webkitベースのブラウザは問題なく動作します。

ここで明らかな何かが欠けていますか？

4

1 に答える 1

2

ブラウザーが異なれば、これらのルールを参照するために異なる名前が使用されます。

私のコードでこの問題を処理する方法は次のとおりです。

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;

しかし、私は最初のバージョンがより明確であるため、好みます。

于 2012-09-14T08:51:22.933 に答える