JS は getComputedStyle() メソッドを使用して CSS 属性値を取得します

Web ページをデバッグするプロセスでは、要素の CSS スタイルを取得するために js がよく使用されます。ここで、私がよく使用するメソッドを以下にまとめます。

1.その方法としては、JSはhtmlタグ(style="...")に書かれたstyle属性に書かれた値しか取得できず、 に定義された属性は取得できないというものです。

コードをコピー コードは次のとおりです: odetitle"> コードは次のとおりです: スタイル #myDiv { 幅:100px; } /style> var myDiv = document.getElementById("myDiv"); var computedStyle = document.defaultView.getComputedStyle(myDiv, null); alert(computedStyle.backgroundColor); alert(computedStyle .width); //"100px" alert(computedStyle.height); //"200px" alert(computedStyle.border); //一部のブラウザでは "1px 単色"

スタイル シート内の実際の境界線ルールを返します (Opera はそれを返しますが、他のブラウザーは返しません)。この違いの理由は、このプロパティの設定には実際には他の多くのプロパティが含まれるため、ブラウザーによって包括的なプロパティの解釈が異なるためです。境界線を設定するときは、実際に 4 辺の境界線の幅、色、およびスタイルの属性を設定します。したがって、たとえ computedStyle.border がすべてのブラウザで値を返すわけではありませんが、computedStyle.borderLeftWidth は値を返します。

一部のブラウザがこの機能をサポートしている場合でも、値の表現方法が異なる場合があることに注意してください。たとえば、Firefox と Safari は、RGB 形式に変換されたすべての色を返します。したがって、getComputedStyle() メソッドを使用する場合でも、複数のブラウザーでテストすることが最善です。

IE は getComputedStyle() メソッドをサポートしていませんが、同様の概念があります。 IE では、style 属性を持つすべての要素には currentStyle 属性もあります。このプロパティは CSSStyleDeclaration のインスタンスであり、現在の要素の計算されたすべてのスタイルが含まれます。これらのスタイルを取得する方法は次のように似ています。

コードをコピーします

コードは次のとおりです: var myDiv = document.getElementById("myDiv"); var computedStyle = myDiv.currentStyle; 🎜>alert(computedStyle.backgroundColor); //"red" alert(computedStyle.width) //"100px" alert(computedStyle.height); //"200px" alert(computedStyle); .border); //unknown

DOM バージョンと同様に、IE は包括的な属性であるため、境界線スタイルを返しません。

3. テスト ケースを作成するときに作成した簡単な関数 (Chrome に適用可能):

コードをコピー コードは次のとおりです: function getCSS(div){ return document.defaultView 。 getComputedStyle(div, null); //return div.currentStyle;//使用されません、IE }

JS は getComputedStyle() メソッドを使用して CSS 属性値を取得します_JavaScript ヒント