ネイティブ JavaScript が要素 style_javascript スキルを取得します

概要:
開発プロセスでは、js を介して DOM 要素のスタイルを取得または変更することがよくあります。DOM 要素のクラスを変更するなど、さまざまな方法があります。ここで、DOM 要素の CSS スタイルを取得するためのネイティブ js について説明します。

は取得され、設定されないことに注意してください。

始める前に、要素に最終的に適用されるすべての CSS 属性オブジェクトを取得する意味について説明しましょう。要素にスタイルが設定されていない場合、ブラウザのデフォルトのスタイルも返されます。

1.ele.style
DOM を学習していたときに、ele.style で要素のスタイル値を取得しているのを見ましたが、取得されるのはノードのスタイル値ではなく、null 値である場合がありました。これは、ele.style は要素タグの style 属性に記述されたスタイル値のみを取得でき、 および 読み込まれたスタイル属性

例:

コードをコピー コードは次のとおりです:

var test = document.getElementById("test");
//ノードの色を取得します
test.style.color;

2.getComputedStyle()
GetComputedStyle は、現在の要素の最終的な CSS 属性値をすべて取得できるメソッドです。

構文は次のとおりです:

window.getComputedStyle("要素", "擬似クラス");

このメソッドは、計算されたスタイルを取得する要素と擬似要素文字列 (「:before」など) の 2 つのパラメーターを受け入れます。疑似要素情報が必要ない場合は、2 番目のパラメータを null にすることができます。 document.defaultView.getComputedStyle("Element", "Pseudo-class");

を使用することもできます。

例:

コードをコピーします コードは次のとおりです:

var test = document.getElementById("test"),
デモ = window.getComputedStyle(test, null); //ノードの色を取得します
デモ.カラー

注: Firefox と Safari は色を rgb 形式に変換します。テスト ノードにスタイルがない場合は、style.length を使用してブラウザのデフォルト スタイルの数を確認します。 IE6-8 はこの方法をサポートしていません。次の方法を使用する必要があります

3.ele.currentStyle currentStyle は IE ブラウザ自体の属性です。その構文は ele.style と似ています。違いは、element.currentStyle が要素に現在適用されている最終的な CSS 属性値を返すことです (外部リンク CSS ファイルと埋め込まれた