JavaScript を使用して要素の CSS 表示ステータスを確認するにはどうすればよいですか?

JavaScript を使用した要素の CSS 表示ステータスの決定

Web 開発では、多くの場合、要素の CSS プロパティを動的に操作または検証する必要があります。チェックすると便利な要素の 1 つの側面は、要素の表示ステータス、特に表示 (表示が「ブロック」に設定) か非表示 (表示が「なし」に設定) であるかどうかです。

JavaScript を使用したチェック要素の表示

JavaScript を使用して要素の CSS 表示プロパティを確認するには、主に 2 つの方法を利用できます。メソッド:

1.計算されたスタイルの確認:

このメソッドは、表示プロパティが継承されているか、CSS ルールで指定されている要素に適しています。計算されたスタイルを取得するには、次のコードを使用できます:

const element = document.getElementById('element-id');
const computedStyle = window.getComputedStyle(element, null);
const displayStyle = computedStyle.display;

2。インライン スタイルの確認:

スタイルがインラインまたは JavaScript で宣言されている場合は、次のように要素の style プロパティに直接アクセスできます:

const element = document.getElementById('element-id');
const displayStyle = element.style.display;

決定表示ステータス:

displayStyle を取得したら、条件ステートメントを使用して次のことを判断できます。要素が表示または非表示になります:

if (displayStyle === 'block') {
  // Element is visible
} else if (displayStyle === 'none') {
  // Element is hidden
}

以上がJavaScript を使用して要素の CSS 表示ステータスを確認するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。