如何在純 JavaScript 中檢查 DOM 元素的可見性？-js教程-PHP中文網

如何在純 JavaScript 中檢查 DOM 元素的可見性？

Linda Hamilton

發布： 2024-11-29 03:03:17

原創

597 人瀏覽過

How Can I Check DOM Element Visibility in Plain JavaScript?

檢查DOM 中元素的可見性

問題：

我們能否使用以下方法確定元素在DOM 中是否可見JavaScript 不依賴像jQuery 這樣的外部函式庫？如果是這樣，我們應該考慮哪些屬性來確保準確的可見性檢查？

答案：

要檢查純JavaScript 中的元素可見性，請考慮以下屬性：

display:
display:

display:

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";
}

登入後複製

display:

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";
}

登入後複製

display:「display」樣式為「none」的元素被視為隱藏。可見性：隱藏元素的「可見性」樣式為「隱藏」。要檢查元素是否可見，可以使用以下程式碼：此方法適用於大多數情況。但是，如果您的頁麵包含帶有「position:fixed」的元素，您可能需要使用更全面的方法來檢查正常文件流以外的元素。在這種情況下，您可以使用以下內容：

以上是如何在純 JavaScript 中檢查 DOM 元素的可見性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！