访问所有CSS样式属性？

Question

我希望通过JavaScript访问所有CSS属性（不仅是针对特定的选择器或元素，还有所有CSS属性）。

我想遍历.style集合的所有属性。

我该怎么做？

Answer 1

您可以使用CSSStyleDeclaration object。 CSSStyleDeclaration对象通过JavaScript属性提供CSS样式属性。这些JavaScript属性的名称与CSS属性名称紧密对应。

此对象还有两个属性：

cssText
一组样式属性及其值的文本表示。文本格式为CSS样式表，减去元素选择器和围绕属性和值的花括号。

长度
此CSSStyleDeclaration中包含的属性/值对的数量。 CSSStyleDeclaration对象也是一个类似于数组的对象，其元素是声明的CSS样式属性的名称。

https://developer.mozilla.org/en/DOM/CSSStyleDeclaration
https://developer.mozilla.org/en/DOM/CSS

Answer 2

您可以在此处查看如何从javascript访问样式表：http://www.quirksmode.org/dom/changess.html。

IE与其他浏览器的不同之处在于，让所有跨浏览器的内容都正确无误。

var theRules = new Array();
if (document.styleSheets[1].cssRules)
    theRules = document.styleSheets[1].cssRules
else if (document.styleSheets[1].rules)
    theRules = document.styleSheets[1].rules

通常，您可以预先定义几个CSS规则，然后在各种对象中添加或删除类，以便更改应用的样式。

Answer 3

//to loop through the available css properties using jQuery
$(document).ready(function() {  
    availableProps = getComputedStyle(document.body);
    $.each(availableProps, function(propCount, cssProp) {
        console.log('CSS Property : ' + cssProp);
    });
});