js を介してスタイル属性にアクセスする
alert(document.getElementById("main").style.backgroundColor);
js を介してスタイル属性を変更するdocument.getElementById("main" ).style.backgroundColor="blue";
上記のコードはよく知られていますが、通常は要素の外観属性を制御するためにスタイル シートを使用します。例:
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります ]
現時点でalert(document.getElementById("main").style.backgroundColor);
を使用すると、null値しか取得できないため、js経由でのみスタイルシートにアクセスできます。
document.styleSheets ブラウザーは大きく異なり、スタイル シートにアクセスするための個々のルールも異なるため、DOM は各スタイル シートに対して cssRules コレクションを指定します。標準では正しく定義されていますが、残念ながら IE ではこのコレクションをルールとして定義すると、次のコードを使用して正しいオブジェクトを取得できます:
var oCssRules=document.styleSheets[0].cssRules||document.styleSheets[0].rules ;
この方法では、次の JS コードを通じてさまざまなブラウザの CSS コレクションを取得できます。
コードをコピーします コードは次のとおりです。
function GetCSS() {
var oCssRules=document.styleSheets[0].cssRules| |document.styleSheets[0].rules;
alert (oCssRules[0].style.backgroundColor)
}
styleSheets[0] は、最初のスタイル シート参照 oCssRules を表します。 [0] は最初のスタイル ルール (#main {}) を表し、style 属性を通じて特定のルールにアクセスします。
同様に、スタイル シート ルール コードを次のように変更します: var oCssRules=document.styleSheets[0].cssRules| |document.styleSheets[0].rules;
alert (oCssRules[0].style.backgroundColor)
}
styleSheets[0] は、最初のスタイル シート参照 oCssRules を表します。 [0] は最初のスタイル ルール (#main {}) を表し、style 属性を通じて特定のルールにアクセスします。
。 コードをコピー コードは次のとおりです:
function SetCSS() {
var oCssRules=document.styleSheets[0]。 cssRules||document.styleSheets[0].rules;
oCssRules[0].style.backgroundColor="red";
oCssRules[0].style.marginLeft="20px"; ].style.marginTop="20px";
}
ただし、多くの要素が同じスタイル シートに関連付けられている可能性があるため、注意が必要です。
要素のスタイル オブジェクトと CSS ルールに加えて、各要素には、要素が最終的に画面にどのように表示されるかを示すために使用される最終スタイルもあります。 style と CSS の一致計算後のスタイル。IE と DOM では、このスタイルにアクセスする方法が 2 つあります。IE では、DOM の getComputedStyle() メソッドを使用します。var oCssRules=document.styleSheets[0]。 cssRules||document.styleSheets[0].rules;
oCssRules[0].style.backgroundColor="red";
oCssRules[0].style.marginLeft="20px"; ].style.marginTop="20px";
}
ただし、多くの要素が同じスタイル シートに関連付けられている可能性があるため、注意が必要です。
JS が最終的なスタイルを取得する方法は次のとおりです。
コードをコピー コードは次のようになります: function GetFinalCSS()
{ var oDiv=document.getElementById("main");
//スタイル属性にアクセスします
alert(oDiv.style .backgroundColor);
//IE メソッド
alert(oDiv. currentStyle.backgroundColor);
//DOM メソッドの場合、2 番目のパラメーターは、hover、first-leeter などの疑似要素です。
//alert(document.defaultView.getComputeStyle(oDiv,null))。
}
スタイル シートにアクセスする手間を省くために、よく currentStyle を使用します
currentStyle は読み取り専用プロパティであり、
getComputedStyle メソッドには、document.defaultView の呼び出しを使用できます (IE と Safari はこのメソッドをサポートしていません)。したがって、getComputedStyle メソッドを使用する場合は、複数のブラウザーでテストするのが最善です。//スタイル属性にアクセスします
alert(oDiv.style .backgroundColor);
//IE メソッド
alert(oDiv. currentStyle.backgroundColor);
//DOM メソッドの場合、2 番目のパラメーターは、hover、first-leeter などの疑似要素です。
//alert(document.defaultView.getComputeStyle(oDiv,null))。
}
スタイル シートにアクセスする手間を省くために、よく currentStyle を使用します
currentStyle は読み取り専用プロパティであり、