[英]Can I programmatically traverse a CSS stylesheet?
jQuery provides a nice, neat way to traverse the DOM...what I'm looking for is a way to traverse a stylesheet, getting and setting attributes for the defined styles. jQuery提供了一种漂亮,简洁的方法来遍历DOM ...我正在寻找的是一种遍历样式表,获取和设置已定义样式的属性的方法。
Example Stylesheet 示例样式表
div {
background: #FF0000;
display: block;
}
.style {
color: #00AA00;
font-family: Verdana;
}
html body > nav.menu {
list-style: none;
}
Now imagine the following code is like jQuery for CSS... 现在想象下面的代码就像jQuery for CSS ...
Getting values from the CSS 从CSS获取值
$("div").attr("background");
//returns #FF0000;
$(".style").attr("color");
// returns #00AA00;
$("html body > nav.menu").attr("color");
// returns undefined;
Setting values in the CSS 在CSS中设置值
$("div").attr("background", "#0000FF");
$(".style").attr("color", "#CDFF4E");
$("html body > nav.menu").attr("color", "#FFFFFF");
Fairly certain this is not possible...but just a wild stab in the dark! 相当肯定这是不可能的......但只是在黑暗中狂奔!
I think you can, but the interface is more obtuse than you probably want. 我想你可以,但界面比你想要的更加迟钝。
document.styleSheets
returns a StyleSheetList
object that seems to behave in an array like way. document.styleSheets
返回一个StyleSheetList
对象,该对象似乎在数组中表现得像。
So document.styleSheets[0]
returns a CSSStyleSheet
object. 所以document.styleSheets[0]
返回一个CSSStyleSheet
对象。 Look to have lots of ways to analyze it's content. 期待有很多方法来分析它的内容。 And each CSSStyleSheet
has a cssRules
property which returns a CSSRuleList
. 每个CSSStyleSheet
都有一个cssRules
属性,它返回一个CSSRuleList
。
And you can traverse the docs on the various types return by the DOM api from there yourself: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet 您可以自己遍历DOM api返回的各种类型的文档: https : //developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet
I just found a way to look through all of your style sheets, using jquery initially: 我刚刚找到了一种方法来查看所有样式表,最初使用jquery:
I have three stylesheets on my page, so first, I must identify the one I need to manipulate and I gave it an id: <style id="localRules">...</style>
我的页面上有三个样式表,所以首先,我必须确定一个我需要操作的<style id="localRules">...</style>
并给它一个id: <style id="localRules">...</style>
Then, I use jQuery to initially find the id'd stylesheet I'm planning to change: 然后,我使用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;
}
}
Hope this is helpful...it worked for me, but took a while to figure it out, especially because ownerNode
is something I've never heard of before. 希望这很有用......它对我有用,但需要一段时间来弄清楚,特别是因为ownerNode
是我以前从未听说过的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.