javascript - 访问选择器后如何访问css选择器属性

Question

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

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

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

现在我想访问数组中的所有 .test 属性（在本例中为颜色和宽度）及其值（在本例中为 Red & 100px）。我该怎么做？

Answer 1

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

另请注意，虽然.rules在某些浏览器中有效，但DOM Level 2 CSS 绑定是.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
});