document.styleSheets什麼也沒有返回

我使用css3動畫將項目從屏幕的一側移動到另一側。無論屏幕分辨率如何，我都希望確保此效果可以正常工作。爲了做到這一點，我使用document.styleSheets爲了訪問與所有動畫關鍵幀的css文件並更改它們的最終值。document.styleSheets什麼也沒有返回

這裏是我使用的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; } 
}

我有好幾個對關鍵幀的在那裏。

我的問題是document.styleSheets返回一個空的CSS文件，如果我console.log它並檢查螢火蟲。因此，rules.length爲空。基於Webkit的瀏覽器沒有任何問題。

我在這裏錯過了一些明顯的東西嗎？

來源

2012-09-14 boz

在Firefox中，似乎.cssRules工作和.rules不。嘗試這個。另請嘗試'var stylesheet = document.styleSheets;'然後使用特定索引訪問樣式表變量。 – Shahar

第二部分似乎有一半工作。它給了我兩個css文件，但如果嘗試使用索引訪問第二個css文件，它不會再提供任何內容。這裏是螢火蟲給我的屏幕截圖，如果我做'console.log（document.styleSheets）' - http://i.stack.imgur.com/c8Omc.png – boz

規範說這個屬性叫做'cssRules'。 –

不同的瀏覽器使用不同的名稱來引用這些規則。

以下是我在我的代碼解決這個問題：

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-14 08:51:22

我的問題是'樣式表'似乎是空白的。如果我只是在沒有索引的情況下執行'document.styleSheets'，那麼我會得到http://i.stack.imgur.com/c8Omc.png，但只要我嘗試使用索引來獲取'animation.css'，我再沒有什麼了。 – boz

'document.styleSheets [1] .cssRules'即使'document.styleSheets [1]'什麼也不給 - 是多麼奇怪的事情。 – boz

這不是一個比瀏覽器更螢火蟲的問題嗎？ –

document.styleSheets什麼也沒有返回

回答

相關問題