我可以以編程方式遍歷CSS樣式表嗎？

Question

jQuery提供了一種漂亮，簡潔的方法來遍歷DOM ...我正在尋找的是一種遍歷樣式表，獲取和設置已定義樣式的屬性的方法。

示例樣式表

div {
    background: #FF0000;
    display: block;
}

.style {
    color: #00AA00;
    font-family: Verdana;
}

html body > nav.menu {
    list-style: none;
}

現在想象下面的代碼就像jQuery for CSS ...

從CSS獲取值

$("div").attr("background");
//returns #FF0000;

$(".style").attr("color");
// returns #00AA00;

$("html body > nav.menu").attr("color");
// returns undefined;

在CSS中設置值

$("div").attr("background", "#0000FF");

$(".style").attr("color", "#CDFF4E");

$("html body > nav.menu").attr("color", "#FFFFFF");

相當肯定這是不可能的......但只是在黑暗中狂奔！

Answer 1

我想你可以，但界面比你想要的更加遲鈍。

document.styleSheets返回一個StyleSheetList對象，該對象似乎在數組中表現得像。

所以document.styleSheets[0]返回一個CSSStyleSheet對象。 期待有很多方法來分析它的內容。 每個CSSStyleSheet都有一個cssRules屬性，它返回一個CSSRuleList 。

您可以自己遍歷DOM api返回的各種類型的文檔： https ： //developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet

Answer 2

我剛剛找到了一種方法來查看所有樣式表，最初使用jquery：

我的頁面上有三個樣式表，所以首先，我必須確定一個我需要操作的<style id="localRules">...</style>並給它一個id： <style id="localRules">...</style>

然后，我使用jQuery初步找到我計划更改的id'd樣式表：

var sheetToChange = "localRules";
var sheets = $(document.styleSheets); 
// loop through all the stylesheets    
for (var thisSheet=0;thisSheet<sheets.length;thisSheet++){
     // find the right stylesheet to work on
     if(sheets[thisSheet].ownerNode.id == sheetToChange ){
          // cross browser referencing of css rules:
          var ruleSet = sheets[thisSheet].cssRules || sheets[thisSheet].rules;
          for (var thisRule=0;thisRule<ruleSet.length;thisRule++){
               // traverse in that style sheet for the rule you want to change, in this case, body:
               if(ruleSet[thisRule].selectorText == "body"){
                    ruleSet[thisRule].style.cursor = "pointer";
               }
           }
           break;               
     }
}

希望這很有用......它對我有用，但需要一段時間來弄清楚，特別是因為ownerNode是我以前從未聽說過的。