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

现在，我想访问数组中的所有.test属性（在本例中为颜色和宽度）及其值（在本例中为红色和100px）。我如何才能做到这一点？

jQuery让这变得简单

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

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

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

---

您需要CSSStyleRule的

.cssText

。（您可以通过本页上的

console.log（document.styleSheets[2]）

和Chrome或Firebug控制台中的项目找到这一点。）

还请注意，虽然

.rules

在某些浏览器中有效，但它是

.cssRules

编辑：如果需要访问各个样式，请使用

.style

属性。同样，您可以看到您是否使用了开发人员控制台

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

---

如果只想查看此规则中应用的样式，则必须遍历

.style

集合的属性（其中包括未明确设置的属性）并检查空值，否则您需要自己解析cssText。

这将失败，因为这是DOM元素，而不是jQuery元素，因此没有定义css。它可以正常工作

this

是当前作用域中的一个jQuery元素。不，它不仅仅是查看控制台中的错误“更重要的是，回调是在当前DOM元素的上下文中触发的，因此关键字this引用元素。”但是.test在css文件中，我们从那里读取它r[0]。seletorText=“.test”.cssText是否仅适用于嵌入式css？@Mathachew不确定您的意思。在此页面上

document.styleSheets[2].cssRules[1].cssText#=>“#adzerk2，#adzerk2+div{display:none！important；}”

感谢ans，但这会返回所有内容（就像任何元素的innerhtml一样），但我希望它像数组一样独立，像数组[0]=颜色，数组[1] = width@Phrogz我把这件事和前几天晚上正在做的某件事搞混了。cssText不可靠。然而，我不知道document.styleSheets，而是试图直接从IE和Chrome之间结果不一的元素中提取。编辑：这就是我所指的：如何迭代.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"