開発プロセス中に、JSを介してDOM要素のスタイルに遭遇することがよくあります。以下など、多くの方法があります。DOM要素のクラスを変更することにより。次に、DOM要素のCSSスタイルを取得するためにネイティブJSについて説明します。それは設定ではないことに注意してください
開始する前に、最初に要素に最終的に適用されるすべてのCSS属性オブジェクトを取得することについて話しましょう。スタイルが要素に設定されていない場合、ブラウザのデフォルトスタイルが返されます。
1.Ele.Style
DOMを学習するとき、私は要素スタイルの値がEle.Styleを介して取得されていることがわかりますが、時々私が得るものはノードのスタイル値ではなく、空の値です。これは、ele.styleが要素タグのスタイル属性に書かれたスタイル値のみを取得でき、<style> </style>で定義され、<link href = "css.css">でロードされるスタイル属性を取得できないためです。
例：
var test = document.getElementById（ "test"）; //ノードのカラーテストを取得します。Style.Color;
2。GetComputedStyle（）
getComputedStyleは、現在の要素のすべてのエンド使用されたCSS属性値を取得できるCSS属性値です。
構文は次のとおりです。
window.getComputedStyle（ "element"、 "pseudo-class"）;
このメソッドは、計算されたスタイルの要素と擬似要素の文字列（たとえば "：before"）を取得する2つのパラメーターを受け入れます。擬似要素情報が不要な場合、2番目のパラメーターはnullになります。また、document.defaultview.getComputedStyle（ "element"、 "pseudo-class"）を介して使用することもできます。
例：
var test = document.getElementById（ "test"）、demo = window.getcomputedStyle（test、null）; //ノードのColor Demo.Colorを取得します
注：FirefoxとSafariは、色をRGB形式に変換します。テストノードにスタイルがない場合は、style.lengthを使用して、ブラウザのデフォルトスタイルの数を表示します。 IE6-8はこの方法をサポートしていません、次の方法が必要です
3。ELE.CURRENTSTYLE
CurrentStyleは、IEブラウザ自体の属性です。その構文は、ele.styleに似ています。違いは、element.CurrentStyleが現在適用されている要素の最終CSS属性値（外部リンクCSSファイル、ページに埋め込まれた<style>属性など）を返すことです。
文法：
var style = dom.currentstyle;
例：
var test = document.getElementById（ "test"）、demo = test.currentStyle; //ノードのColor Demo.Colorを取得します。
注：包括的な属性ボーダーなどの場合、IEは未定義です。他のブラウザの一部は値を返し、一部は返されませんが、borderLeftwidthのreturn値などの属性もあります。
4。getPropertyValue（）
getPropertyValueは、CSSスタイルの直接プロパティ名を取得します
構文は次のとおりです。
window.getcomputedStyle（element、null）.getPropertyValue（プロパティ）
例：
var test = document.getElementById（ 'test'）; window.getComputedStyle（test、null）.getPropertyValue（ "background-color"）;
注：属性名はキャメル形式をサポートしていません。IE6-8はこの方法をサポートしていないため、次の方法が必要です
5。getAttribute
getAttributeはgetPropertyValueに似ています、1つの違いはプロパティ名のラクダ形式です
例：
var test = document.getElementById（ 'test'）; window.getComputedStyle（test、null）.getPropertyValue（ "backgroundcolor"）;
注：この方法はIE6-8のみをサポートしています
まとめ：
jQuery CSS（）メソッド、基礎となる操作は、getComputedStyleおよびgetPropertyValueメソッドを使用します。ネイティブJS開発を使用すると、上記の方法を使用して要素の値を取得できます。
以下は、IE、Firefox、Chrome、その他のブラウザと互換性のある要素スタイルを取得する方法で、プロジェクトに適用できます。
関数GetStyle（ELE）{var style = null; if（window.getcomputedStyle）{style = window.getComputedStyle（ELE、null）; } else {style = ele.currentstyle; } return style;}ネイティブJSで要素スタイルを取得する上記の簡単な方法は、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。