JavaScript での HTML 要素のスタイル値の取得 JavaScript では、要素のインライン スタイルを取得するのは簡単です。ただし、 経由で設定されたスタイルにアクセスすることはできません。 </p> <p>計算されたスタイル値を取得するために、JavaScript は、 document.defaultView オブジェクトを通じてアクセスできる getComputedStyle メソッドを提供します。このメソッドは、クロスブラウザー形式の検索を標準化し、ピクセル単位に変換された値を表示します。使用方法は次のとおりです:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>let element = document.getElementById("box"); let width = getComputedStyle(element).getPropertyValue("width");</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>Internet Explorer などの古いブラウザの場合は、別のアプローチが必要です。 IE は、キャメルケース形式のスタイル プロパティ名を期待し、元の単位で値を返す element.currentStyle プロパティをサポートしています。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>let width = element.currentStyle.width;</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>ブラウザ間の互換性を確保するには、次のようなヘルパー関数を使用できます。 </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>function getStyle(element, styleProp) { let value; if (document.defaultView && document.defaultView.getComputedStyle) { styleProp = styleProp.replace(/([A-Z])/g, "-").toLowerCase(); value = getComputedStyle(element).getPropertyValue(styleProp); } else if (element.currentStyle) { styleProp = styleProp.replace(/\-(\w)/g, str => str[1].toUpperCase()); value = element.currentStyle[styleProp]; if (/^\d+(em|pt|%|ex)?$/i.test(value)) { return convertPixelValue(value); } else { return value; } } return value; }</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>この関数はブラウザ間の違いを処理し、IE のレガシー プロパティと単位形式を標準に一致するように変換します。このヘルパーを使用すると、ブラウザ間で一貫して計算されたスタイル値を取得できます。</p>
