プレーンな JavaScript で DOM 要素の可視性を確認するにはどうすればよいですか?

DOM での要素の可視性の確認

質問:

次を使用して、要素が DOM で可視であるかどうかを確認できますか? jQueryなどの外部ライブラリに依存しないJavaScript?その場合、正確な可視性チェックを確実にするにはどの属性を考慮する必要がありますか?

回答:

純粋な JavaScript で要素の可視性をチェックするには、次の属性を考慮してください:

• display: 「表示」スタイルが「なし」の要素
• visibility: 非表示の要素には、「hidden」の "visibility" スタイルがあります。

要素が表示されているかどうかを確認するには、次のようにします。次のコードを使用します:

function isElementVisible(element) {
  // Check if the element has any parent with "display: none"
  if (element.offsetParent === null) {
    return false;
  }

  // Check if the element itself has "display: none" or "visibility: hidden"
  const style = window.getComputedStyle(element);
  return style.display !== "none" && style.visibility !== "hidden";
}

このアプローチはほとんどの場合に機能します。ただし、ページに「position:fixed」の要素が含まれている場合は、通常のドキュメント フローの外側にある要素もチェックする、より包括的なアプローチを使用する必要がある場合があります。このような場合は、以下を使用できます:

function isElementVisibleFixed(element) {
  // Check if the element has any parent with "display: none"
  if (element.offsetParent === null) {
    return false;
  }

  // Check if the element itself has "display: none" or "visibility: hidden" or "position: fixed"
  const style = window.getComputedStyle(element);
  return style.display !== "none" && style.visibility !== "hidden" && style.position !== "fixed";
}

以上がプレーンな JavaScript で DOM 要素の可視性を確認するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。