DOM 要素に適用されたスタイル値を取得する方法

DOM 要素の表示プロパティの取得

Web ページでは、表示プロパティによって要素の表示設定とレイアウトが決まります。 .style.* プロパティは HTML で定義されたスタイル属性へのアクセスを提供し、getComputedStyle() メソッドは適用されたスタイル値を明らかにします。

.style.* プロパティについて

.style.display などの .style.* プロパティは、要素に割り当てられた対応するスタイル属性の値を返します。ただし、これらのプロパティはブラウザーに適用されたスタイルを反映しません。たとえば、次のコード スニペットでは:

<code class="html"><style type="text/css">
  a { display: none; }
</style>

<script type="text/javascript">
  var a = (document.getElementById('a')).style;
  alert(a.display); // Displays an empty string
</script></code>

HTML に表示属性が定義されていないため、「a」要素の .style.display プロパティは空の文字列を返します。この要素は CSS スタイル シートで表示: none に視覚的に設定されているため、これは誤解を招きます。

適用されたスタイル値に getComputedStyle() を使用する

適用されたスタイルを取得するには値を取得するには、getComputedStyle() メソッドを使用します。例:

<code class="javascript">var a = document.getElementById('a');
var computedStyle = window.getComputedStyle(a);
alert(computedStyle.display); // Displays "none"</code>

このシナリオでは、getComputedStyle() は、「a」要素に適用される実際の CSS 値を返します。

結論

スタイルプロパティを扱うときは、スタイル属性 (.style. 経由でアクセス) と適用されたスタイル値 (getComputedStyle() 経由でアクセス) の区別に注意してください。 .style. プロパティは、HTML で定義されたスタイル属性のみを反映しており、要素の外観を正確に表していない可能性があります。そのためには、常に getComputedStyle() を使用して、適用されたスタイル値を取得します。

以上がDOM 要素に適用されたスタイル値を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。