document.styleSheets returns nothing

Question

css3 애니메이션을 사용하여 항목을 화면의 한쪽에서 다른쪽으로 이동합니다. 이 효과가 화면 해상도에 관계없이 작동하는지 확인하고 싶습니다. 이를 수행하기 위해 모든 애니메이션 키 프레임이 포함 된 CSS 파일에 액세스하고 최종 값을 변경하기 위해 document.styleSheets을 사용합니다.

이

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 파일이 포함되어 있습니다 : 여기

내가 사용하고있는 JS 코드

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

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

내가 거기에 키 프레임의 꽤 많은 쌍을 가지고있다.

내 문제는 document.styleSheets이 console.log 인 경우 빈 css 파일을 반환하고 방화범을 끄며 검사합니다. 따라서 rules.length은 null입니다. 웹킷 기반 브라우저는 문제없이 작동합니다.

내가 여기에 뭔가 분명한 것을 놓치고 있습니까?

Answer 1

다른 브라우저는 다른 이름을 사용하여 해당 규칙을 나타냅니다.

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; 

그러나 명확입니다 나는 첫 번째 버전을 선호합니다.