我可以编程遍历CSS样式表吗？

Question

jQuery 提供了一种不错、简洁的方式来遍历 DOM…… 我所需要的是一种遍历样式表的方法，以获取并设置已定义样式的属性。 样式表示例：

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

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

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

现在想象一下，以下代码就像是CSS的jQuery...

从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");

相当肯定这是不可能的...但只是一次猜测！

- Matthew Layton

---

这里有一个不错的教程：http://davidwalsh.name/add-rules-stylesheets - Sam Dufel

使用JavaScript直接将get/set属性和属性添加到样式表中的目的是什么？ - Jason

可能是在JavaScript / jQuery中解析CSS的重复问题。 - Mike Brant

@Jason，例如：在.NET中有一个名为SystemColors的类，它依赖于底层主题内容。我想知道是否可以使用CSS / JavaScript建立类似的原则。 - Matthew Layton

@Jason 或许可以允许用户提供全局样式设置的值？比如说，我想让网站上的所有链接都是红色的。在全局范围内进行设置比在每个链接上进行设置更好。但是有很多实现这一点的方法。我不确定这是否是最好的方法，因为我还没有真正尝试过它。 - Alex Wayne

Answer 1

我认为你可以，但界面可能比你想象的更加晦涩。 document.styleSheets返回一个类似于数组的StyleSheetList对象。

因此，document.styleSheets[0]返回一个CSSStyleSheet对象。有很多分析它内容的方法。每个CSSStyleSheet都有一个cssRules属性，该属性返回一个CSSRuleList。

您可以自行遍历由DOM API返回的各种类型的文档： https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet

- Alex Wayne

---

很棒。我不在乎它有多难懂。如果可以将其包装成更简洁的方式来操作样式...我会构建它。对这个答案点赞。 - Matthew Layton

Answer 2

我刚刚发现了一种查看所有样式表的方法，首先使用jquery：

我的页面上有三个样式表，所以首先我必须识别需要操作的样式表并给它一个id： <style id="localRules">...</style>

然后，我使用jQuery来找到我计划更改的带有id的样式表：

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是我以前从未听说过的东西。

- itsmikem