javascript - 访问所有 CSS 样式属性？

Question

我想通过 JavaScript 访问所有 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);
    });
});