javascript - すべてのCSSスタイルのプロパティにアクセスできますか？

Question

JavaScriptを介してすべてのCSSプロパティ（特定のセレクターまたは要素だけでなくすべて）にアクセスしたい。

.styleコレクションのすべてのプロパティを繰り返し処理したいと思います。

これどうやってするの？

Answer 1

を使用できますCSSStyleDeclaration object。CSSStyleDeclarationオブジェクトは、JavaScriptプロパティを介してCSSスタイル属性を使用できるようにします。これらのJavaScriptプロパティの名前は、CSS属性名に密接に対応しています。

このオブジェクトには、次の2つの追加プロパティがあります。

cssText
一連のスタイル属性とその値のテキスト表現。テキストはCSSスタイルシートのようにフォーマットされますが、要素セレクターと属性と値を囲む中括弧はありません。

length
この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);
    });
});