Javascriptで要素を取得するCSSスタイルのコード例_基礎知識

CSS を使用してページを制御するには、インライン スタイル (インライン スタイル)、インライン スタイル、リンク スタイル、インポート スタイルの 4 つの方法があります。

インラインスタイル(inline style)は、HTMLタグ内のstyle属性に

のように記述されます

インライン スタイルは、 などの style タグに記述されます。

リンク タイプは、リンク タグを使用して CSS ファイルを導入することです (例:

)

インポート方法は、@import url("test.css") のように import を使用して CSS ファイルを導入します


JavaScript を使用して要素のスタイル情報を取得したい場合、最初に思い浮かぶのは要素のスタイル属性です。ただし、要素の style 属性は、要素のインライン スタイルのみを表します。要素のスタイル情報の一部がインライン スタイルで記述され、一部が外部 CSS ファイルで記述されている場合、要素の完全なスタイル情報は表現できません。 style 属性を通じて取得できます。したがって、要素のスタイル情報を取得するには、要素の計算されたスタイルを使用する必要があります。

ウィンドウ オブジェクトの getComputedStyle メソッドを使用して、要素の計算されたスタイルを取得します。このメソッドには 2 つのパラメーターがあります。最初のパラメーターは、計算されたスタイルを取得できる要素です。 null または空の文字列、疑似クラス (: before、: after など)、両方のパラメータが必要です。

例を挙げてみましょう

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)
[/code]

注: 取得されたカラー属性はすべて 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 属性）。