スタイル、CurrentStyle、getComputedStyleの違いの紹介
シートをスタイリングするには3つの方法があります
インラインスタイル：タグに記述されています。インラインスタイルは、すべてのタグに対してのみ有効です。
内部スタイルシート：HTMLで記述されており、内部スタイルはWebページにのみ有効です。
外部スタイルシート：多くのWebページが同じスタイルを使用する必要がある場合は、CSSファイルに.CSSをサフィックスとして書き込み、これらのスタイルを使用する必要がある各WebページのCSSファイルを参照してください。最も一般的に使用されるスタイル属性はです。 JavaScriptでは、xxxの値はdocument.getElementById（ID）.style.xxxxを介して取得できます。ただし、予想外に、これは組み込みの方法、つまりスタイル属性に設定された値を介して設定されたスタイル値のみを取得できます。
解決策： CurrentStyle、Runtimestyle、GetComputedStyle Style Standard Styleを紹介します。
Runtimestyleランタイムスタイル！スタイルの特性と重複すると、スタイルの特性が上書きされます！
CurrentStyleは、スタイルとRuntimestyleの組み合わせを指します！ currentStyle（つまりのみ）を介して、インラインまたは外部から参照されるCSSスタイルの価値を取得できます。例：document.getElementById（ "test"）。currentStyle.top
FFと互換性があるようにするには、それを行うにはgetComputedStyleが必要です
注：getComputedStyleはFirefoxにあり、CurrentStyleはIEにあります。例えば
<style> #mydiv {width：300px;} </style>しかし：
var mydiv = document.getElementByid（ 'myDiv'）; if（mydiv.currentStyle）{var width = mydiv.currentStyle ['width']; alert（ 'ie：' + width）;} else if（window.getComputedStyle）{var width = window.getedtyle（myDiv null）['width']; alert（ 'firefox：' + width）;}さらに、FFの下では、次の方法でそれを取得することもできます
document.defaultview.getComputedStyle（myDiv、null）.width; window.getComputedStyle（myDiv、null）.width;
ここにいくつかの追加があります：
ブログを読んでいる間、私はこれらの3人の男 - スタイル、CurrentStyle、getComputedStyleを見ました。以前に勉強していたときに出会ったことはありませんが、今ではそれに遭遇したので、少し勉強しました。私はいくつかの問題を発見しましたが、多分それは時間の年齢のためであるか、それは私の無知のためかもしれませんが、それは本当に私を混乱させました。タオ・ユアンミングは、優れたフロントエンドになりたいフロントエンドの開発者として、勉強する際にあまり理解を求めていないと言ったが、それでも彼はそれを理解する必要がある、さもなければ彼は眠ることができないだろう！
最初に基礎を置きましょう。カスケードスタイルシートの3つの形式について話しましょう（それぞれの習慣に従って、3つのタイプの名前は異なります）：
1つ。インラインスタイル：HTMLタグのスタイル属性を使用して設定します。のように：
1 <p style = "color：＃f90;">これはインラインスタイル</p>です
二。埋め込みスタイル：<Style>タグを使用して<Head>タグを介して設定します。のように：
<style type = "text/css">/*これは埋め込みスタイル*/.stuff {color：＃f90} </style>です三つ。外部スタイル：<link>タグを介して設定します。のように：
<link rel = "styleSheet" href = "path/style.css" type = "text/css"> ===================================================================================================== .stuff {color：＃f90;}3番目の方法が推奨されます。
下の3人の主人公はフィールドにあります。
ゆっくりと私たちに向かって歩いた最初の人はスタイルでした。 obj.style.attrで使用されています。映画評論家が彼のブログにコメントした：
スタイルは要素のインラインスタイルのみを取得することができ、スタイルを使用して内側と外側のスタイルを取得することはできません。
次のコードで確認しましたが、実際には上記の通りです。私は3つのスタイルを使用しましたが、得た結果はインラインスタイルの価値です。
<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> untted document </title> <link href = "liste.cs type = "text/css"/> <style type = "text/css">＃stuff {width：300px;} </style> <script type = "text/javascript"> window.onload = function（）{var odiv = document.getElementbyid（ 'foot'）; console.log（odiv.style.width）; //alert(odiv.style.width）; }; </script> </head> <body> <div id = "Stuff"> </div> </body> </html>外部リンクstyleSheet style.css：
1 @Charset "UTF-8"; 2 / * css document * / 3 #stuff {width：100px;}
結果は400pxです。
次のスタイルはCurrentStyleです。これには、強力なバッキングMSがあると言われています。つまり、この男はIEブラウザーでのみ使用できます。他の人は良くありません。 window.currentstyle ["attr ']またはwindow.currentstyle.attr。で使用されます。IEでは、埋め込みスタイルシートで幅の属性値が300pxの幅を取得します。
最後の1つは、window.getcomputedStyle（ob、pseudoelt）["attr ']またはwindow.getComputedStyle（ob、pseudoelt）を使用します。
映画評論家はコメントしました：
getComputedStyleはCurrentStyleと同じように機能しますが、FF、Opera、Safari、およびChromeに適しています。
懐疑的な態度で、私はそれを再び検証し、IE7、IE8、およびIE9はすべてエラーを報告しました。
オブジェクトは「getComputedStyle」属性またはメソッドをサポートしていません
ブラウザの互換性の問題。ブラウザの互換性の問題は、実際、フロントエンド開発者、特に犯人IE6にとって頭痛の問題です。しかし、私たちは恐れることはできず、それから離れることはできませんが、代わりに動きに対処し、兵士が水と土壌をブロックするようになります。あなたはそれとの戦いで多くの楽しみとそれを打ち負かした後の達成感を持っているでしょう！ ！ ！
別のポイント：getComputedStyleとcurrentStyleは属性値のみを取得できますが、属性を設定することはできません。属性値を設定する場合は、ob.style.attrを使用します。
何か問題がある場合はアドバイスをください、事前にありがとう！ ！