JavaScript で DOM 要素の Display プロパティを正確に取得する方法

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

このドキュメントでは、さまざまな表示プロパティを持つ 2 つの要素と相互作用する JavaScript スクリプトを含む HTML 構造の概要を説明します。彼らと一緒に。スクリプトは各要素の表示プロパティを取得しようとしますが、予期しない結果が発生します。 JavaScript の .style.* プロパティを使用して値を表示すると、予期される「none」および「block」値の代わりに空の文字列が表示されます。これにより、表示プロパティを正確に取得するための正しいメソッドへのクエリが実行されます。

重要な洞察は、style 属性と適用されるスタイルの違いを理解することにあります。 JavaScript の .style.* プロパティは、HTML 要素のインライン スタイルに存在する動的プロパティである style 属性に直接マップされます。ただし、表示されるスタイルまたは適用されるスタイルは、CSS ルール、継承、ユーザー設定などの要素の影響を受けることがよくあります。適用されたスタイルを取得するには、getComputedStyle() メソッドを利用する必要があります。

たとえば、次の CSS ルールを適用するとします。

<code class="css">a {
    display: inline;
}</code>

の .style.display プロパティアンカー要素は、CSS ルールにより要素がインラインに表示される場合でも、「none」(インライン値) を返します。これは、.style.* プロパティは、適用されたスタイルではなく、インライン スタイル属性のみを反映するためです。

適用されたスタイルを取得するには、getComputedStyle() メソッドを使用する必要があります。これは、計算されたすべてのスタイルへのアクセスを提供するためです。カスケード スタイル (ユーザー設定やブラウザのスタイル エンジンによって定義されたスタイルを含む)。以下に例を示します。

<code class="javascript">var a = (document.getElementById('a'));
var display = window.getComputedStyle(a).display;
alert(display); // Will output "inline"</code>

ベスト プラクティスとして、スタイル プロパティを直接変更するのではなく、.className を切り替えてプレゼンテーションをロジックから分離することをお勧めします。このアプローチは、モジュール性、保守性、コードの再利用性を促進します。

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