Question

.test
{
 color:Red;
 width: 100px;
}

   var r = document.styleSheets[index].rules;   

   r[0].selectorText => Here we get ".test";

现在我希望能够访问数组中所有.test属性（在本例中为颜色和宽度）及其值（在本例中为Red＆amp; 100px）。我该怎么做？

Answer 1

你想要CSSStyleRule的.cssText。（您可以在此页面上使用console.log(document.styleSheets[2])自行查找，并浏览Chrome或Firebug控制台中的项目。）

另请注意，虽然.rules适用于某些浏览器，但DOM Level 2 CSS binding为.cssRules。

修改：如果您需要访问各个样式，请使用.style属性。再次，你可以看到你是否使用了开发者控制台。

var sheet = document.styleSheets[2];
var rules = sheet.cssRules[1];
console.log( rules ); // Lots of properties
console.log( Object.keys(rules) );
// ["parentRule", "cssText", "type", "selectorText", "style", "parentStyleSheet"]
console.log( rules.style.display ); // "none"

如果您想查看在此规则中应用的样式，则必须遍历.style集合的属性（其中包含不属于的属性）明确设置）并检查空值，否则你需要自己解析cssText。

Answer 2

jQuery使这很容易。

$('.test').each(function(){
    var curColor = $(this).css('color');
    // etc
});

如何在访问选择器后访问css选择器属性

2 个答案: