基本コード：
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> document> document </title> <style> div {color：yellow; } </style> </head> <body> <div>これはdiv </div> </body> </html>です1.要素を使用して取得します
<script> var div = document.getElementsByTagname（ "div"）[0]; console.log（div.style.color）; // "" console.log（div.style.backgroundcolor）; // red </script>
Element.Style属性は、インラインスタイルのみを取得でき、<style>タグでスタイルを取得することも、外部スタイルを取得することもできません。
Element.Styleは要素の属性であるため、属性を再割り当てして要素の表示をオーバーライドできます。
<script> var div = document.getElementsByTagname（ "div"）[0]; div.style ['background-color'] = "green"; console.log（div.style.backgroundcolor）; //緑</script>
2。getComputedStyleとcurrentStyleを通じてスタイルを取得します
GetComputedStyleの使用環境は、Chrome/Safari/Firefox IE 9,10,11です
<script> var div = document.getElementsByTagname（ "div"）[0]; var styleobj = window.getComputedStyle（div、null）; console.log（styleobj.backgroundcolor）; // red Console.log（styleobj.color）; // Yellow </script>
CurrentStyleはIEで完全にサポートでき、Chromeはサポートしていません、FFはサポートしていません
<script> var div = document.getElementsByTagname（ "div"）[0]; var styleobj = div.currentstyle; console.log（styleobj.backgroundcolor）; // red Console.log（styleobj.color）; // Yellow </script>
3。Ele.StyleとGetComputedStyleまたはCurrentStyleの違い
3.1Ele.Styleは読み取りされていますが、GetComputedStyleとCurrentStyleは読み取り専用です
3.2 ELE.Styleは、CSSスタイルをラインのスタイルプロパティでのみ設定することができ、GetComputedStyleおよびCurrentStyleも他のデフォルト値を取得できます。
3.3 Ele.Styleがスタイル属性のスタイルを取得し、必ずしも最終スタイルではなく、他の2つは要素の最終的なCSSスタイルを取得します
4.スタイルの互換性の書き込みを取得します
<script> //非ラインスタイル（スタイルのスタイルまたはリンクCSSファイルのスタイル）を取得すると、OBJは要素です。 //関数によって渡された属性は文字列であるため、[]を使用して値を取得する必要があります} else {// nonie return window.getComputedStyle（obj、false）[attr]; }} /* css属性を取得または設定します* / function css（obj、attr、value）{if（arguments.length == 2）{return getStyle（obj、attr）; } else {obj.style [attr] = value; }} </script>5.window.getComputedStyle（ELE [、 pseudoelt]）;
2番目のパラメーターがnullまたは省略されている場合は、eleのCSSSSTYLELECLARATIONオブジェクトを取得します
それが擬似クラスの場合、擬似クラスのcsSSSSTYLELECLARATIONオブジェクトが得られます
<style> div {width：200px;高さ：200px;バックグラウンドカラー：＃fc9;フォントサイズ：20px;テキストアライグ：センター; } div：afted {content： "これは後の";表示：ブロック;幅：100px;高さ：100px;バックグラウンドカラー：＃f93;マージン：0 Auto;ラインハイト：50px; } </style> <body> <div id = 'mydiv'>これはdiv </div> <入力id = 'btn' type = "button" value = 'getStyle'/> <スクリプト> var btn = document.queryselector（ '＃btn'）; btn.onclick = function（）{var div = document.queryselector（ '＃mydiv'）; var styleobj = window.getComputedStyle（div、 'after'）; console.log（styleobj ['width']）; } </script> </body>6.GETPROPERTYVALUE CSSSSTYLELECLARATIONオブジェクトで指定されたプロパティ値を取得します
<script> var div = document.getElementsByTagname（ "div"）[0]; var styleobj = window.getComputedStyle（div、null）; console.log（styleobj.getPropertyValue（ "background-color"））; </script>
getPropertyValue（propertyName）のpropertyName;ラクダの表情になることはできません
obj.currentStyle ['マージン左']は機能します
obj.currentStyle ['marginleft']は機能します
window.getComputedStyle（obj、null）['margin-left']は機能します
window.getComputedStyle（obj、null）['marginleft']動作します
window.getComputedStyle（obj、null）.getPropertyValue（ 'margin-left'）有効
window.getComputedStyle（obj、null）.getPropertyValue（ 'marginleft'）無効
obj.currentstyle.widthが有効です
obj.currentstyle.background-color無効
obj.currentstyle.backgroundcolor Works
window.getComputedStyle（obj、null）.width有効
window.getComputedStyle（obj、null）.background-color無効
window.getComputedStyle（obj、null）.backgroundcolor Works
要約すると、「 - 」の属性を直接指摘することはできないため、それを処理するためのgetPropertyValueメソッドがありますが、[]を使用してgetPropertyValueを置き換えることができます。
7.DefaultView
多くのオンラインデモコードでは、getComputedStyleがdocument.defaultViewオブジェクトを介して呼び出されます。ほとんどの場合、ウィンドウオブジェクトを介して直接呼び出すことができるため、これは必須ではありません。ただし、defaultViewを使用する必要がある状況があります。これは、Firefox3.6（iframe）のサブフレーム内のスタイルにアクセスするためです。
JSのスタイル（推奨）を取得する上記の簡単な実装方法は、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。