DOM 要素の「display」プロパティに正確にアクセスするにはどうすればよいですか?

DOM 要素の Display プロパティへの正確なアクセス

DOM 要素の Display プロパティの取得は簡単そうに見えますが、予期しない結果が生じる可能性があります。次の例を考えてみましょう。

var a = (document.getElementById('a')).style;
alert(a.display);

このアラートでは、予期される「none」値の代わりに空の文字列が表示される場合があります。なぜこのようなことが起こるのでしょうか?

問題は、CSS 属性値と適用されたスタイルの違いにあります。

CSS 属性値と適用されたスタイル

.display を含む .style.* プロパティは、適用されたスタイルではなく、CSS 属性値にマップされます。適用されたスタイルは CSS カスケードの結果を反映しており、属性値とは異なる場合があります。

指定された例では、要素 "a" の表示プロパティは CSS 属性スタイルで "none" に設定されています。

a {
  display: none;
}

ただし、適用されるスタイルは、外部スタイルシートまたは動的により異なる場合があります。

getComputedStyle の使用

適用されたスタイルを正しく取得するには、getComputedStyle() メソッドを使用します。要素を引数として受け取り、計算された CSS スタイルを含む CSSStyleDeclaration オブジェクトを返します。

var a = (document.getElementById('a'));
alert(getComputedStyle(a).display);  // Displays "none" as expected

代替アプローチ: Class Toggles

代替方法として、次の使用を検討してください。要素の表示/非表示を切り替える CSS クラス。このアプローチにより、プレゼンテーションがロジックから分離され、CSS 属性を直接操作する必要がなくなります。

.hidden {
  display: none;
}

var p = document.getElementById('p');
p.classList.toggle('hidden'); // Toggles the display property

getComputedStyle またはクラス トグルを使用すると、DOM 要素の表示プロパティに正確にアクセスして制御できます。

以上がDOM 要素の「display」プロパティに正確にアクセスするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。