DOM 要素の Display プロパティを正確に取得する方法と、.style プロパティが空の文字列を返す理由

DOM 要素の表示プロパティの取得: 真の値を明らかにする

提供された HTML コードでは、表示が異なる段落とアンカーが導入されていますスタイル。ただし、style プロパティを通じてこれらのスタイルを取得すると、予期しない空の文字列が返されるようです。これはなぜ起こるのでしょうか?また、表示プロパティを正確に取得するにはどうすればよいですか?

空の文字列の謎

最初の混乱は、.style.* が原因で発生します。プロパティは、適用されたスタイルではなく、スタイル属性に直接マップされます。これは、基本的にインライン スタイル宣言をチェックしていることを意味しますが、計算されたスタイルが常に反映されているとは限りません。

解決策: getComputedStyle

実際に適用されたスタイルを取得するには継承されたプロパティを含む、getComputedStyle メソッドを使用する必要があります。このメソッドは DOM 要素を引数として受け取り、計算されたスタイル値を含む CSSStyleDeclaration オブジェクトを返します。

提供されたコードは、次のように getComputedStyle を使用するように変更できます。

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

最初の意図的な表示設定の後、アラートではアンカー タグに「なし」が表示され、2 番目のアラートでは段落要素に「ブロック」が表示され、3 番目のアラートでは「なし」が表示されます。これは、要素の計算された表示スタイルを正確に反映します。

代替アプローチ: クラスの切り替え

表示プロパティに依存する代わりに、クラス名を使用して切り替えることを検討できます。要素の可視性。プレゼンテーションをロジックから分離すると、コードが簡素化され、スタイル関連の問題が発生しにくくなります。

以上がDOM 要素の Display プロパティを正確に取得する方法と、.style プロパティが空の文字列を返す理由の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。