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

Question

JavaScriptを使用して、すべてのCSSプロパティ（特定のセレクタや要素だけでなく、すべて）にアクセスしたいと考えています。

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

どうすればいいですか？

Answer 1

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

cssText
スタイル属性とその値のセットのテキスト表現：

このオブジェクトは、2つの追加プロパティがあります。テキストは、属性と値を囲む要素セレクタと中括弧を除いた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); 
    }); 
});