ライブラリを使用せずに JavaScript で HTML 要素のスタイル値にアクセスする はじめに: HTML 要素のスタイル属性の操作は非常に重要です動的 Web アプリケーションの側面。この質問では、 を通じてスタイルが設定されている要素からスタイル値を取得する方法について説明します。 </p> <p><strong>スタイル値の取得:</strong></p> <p><strong></strong></p><style> タグを使用して定義されたインライン スタイルを取得するには、タグを使用するには、要素の <p>計算されたスタイル<strong> にアクセスする必要があります。この計算されたスタイルは、インライン スタイルによってオーバーライドされたり、親要素から継承された場合でも、要素に適用される実際の値を表します。</strong></p> <p>クロスブラウザ アプローチ:</p> <p><strong>取得計算されたスタイルをブラウザ間で使用するのは難しい場合があります。 Internet Explorer (IE) には独自のメカニズムである element.currentStyle があり、他のブラウザでは document.defaultView.getComputedStyle メソッドが使用されます。</strong></p> <p>クロスブラウザ機能:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>function getStyle(el, styleProp) { var value, defaultView = (el.ownerDocument || document).defaultView; if (defaultView && defaultView.getComputedStyle) { styleProp = styleProp.replace(/([A-Z])/g, "-").toLowerCase(); return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp); } else if (el.currentStyle) { styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) { return letter.toUpperCase(); }); value = el.currentStyle[styleProp]; if (/^\d+(em|pt|%|ex)?$/i.test(value)) { return convertIEValueToPixels(value); } return value; } }</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>このクロスブラウザ実装を簡素化するには、getStyle() という関数を使用します。定義:</p> <p><strong>この関数は、ブラウザー間の互換性のためにプロパティ名をサニタイズし、IE での単位変換を処理します。</strong></p> <p>使用法:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>var width = getStyle(document.getElementById("box"), "width");</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>特定のスタイル プロパティを取得するには、目的のプロパティ名を指定して getStyle() 関数を使用します。 <strong></strong></p> <p>制限事項:</p>getStyle() 関数は、便利なクロスブラウザー アプローチを提供します。ただし、特に色などの特定のプロパティの処理において制限があり、IE は計算値の代わりに定義された値を返す場合があります。たとえば、#ff0000 として定義された色のプロパティは、getStyle() を呼び出すと赤を返す可能性があります。
