CSS を使用してページを制御するには、インライン スタイル (インライン スタイル)、インライン スタイル、リンク スタイル、インポートされたスタイルの 4 つの方法があります。
インラインスタイル（インラインスタイル）は、<div></div>などのhtmlタグ内のstyle属性に記述します。
インライン スタイルは、<style type="text/css">div{width:100px height:100px}</style> などの style タグに記述されます。
リンクの種類は、<link href="test.css" type="text/css" rel="stylesheet" /> のように、リンク タグを使用して CSS ファイルを紹介します。
インポート方法は、 @import url("test.css") などの import を使用して CSS ファイルを導入することです。
JavaScript を使用して要素のスタイル情報を取得したい場合、最初に思い浮かぶのは要素の style 属性です。ただし、要素の style 属性は、要素のインライン スタイルのみを表します。要素のスタイル情報の一部がインライン スタイルで記述され、一部が外部 CSS ファイルで記述されている場合、要素の完全なスタイル情報は表現できません。 style 属性を通じて取得できます。したがって、要素のスタイル情報を取得するには、要素の計算されたスタイルを使用する必要があります。
要素の計算されたスタイルを取得するには、ウィンドウ オブジェクトの getComputedStyle メソッドを使用します。このメソッドには 2 つのパラメータがあります。最初のパラメータは、計算されたスタイルを取得する要素です。2 番目のパラメータは、null、空の文字列、または疑似値です。クラス (例: before、:after) では、両方のパラメータが必要です。
例を挙げてみましょう
<style type="text/css">
#testDiv{
ボーダー: 1 ピクセル赤一色;
幅: 100ピクセル;
高さ: 100ピクセル;
色: 赤;
}
</スタイル>
<div id="testDiv"></div>
var testDiv = document.getElementById("testDiv");
var computedStyle = window.getComputedStyle(testDiv, "");
var width = computedStyle.width; //100px;
var height = computedStyle.height; //100px;
var color = computedStyle.color; //rgb(255, 0, 0);
[/コード]
注: 取得されたカラー属性はすべて rgb(#,#,#) 形式で返されます。
このとき、testDiv.styleを使用してスタイル情報を取得すると、testDiv.style.widthは必ず空になります。
getComputedStyle メソッドは IE8 以前のバージョンには実装されていませんが、IE の各要素には独自の currentStyle プロパティがあります。
それでは、一般的なものを取得しましょう
次のようにコードをコピーします。
var testDiv = document.getElementById("testDiv");
var styleInfo = window.getComputedStyle ? window.getComputedStyle(testDiv, "") : testDiv.currentStyle;
var width = styleInfo.width; //100px;
var height = styleInfo.height; //100px;
var color = styleInfo.color; // rgb(255, 0, 0);
最後に、要素の計算されたスタイルは読み取り専用であることに注意してください。要素のスタイルを設定したい場合は、要素の style 属性を使用する必要があります (これが要素の style 属性の本当の目的です)。 。