如何在纯 JavaScript 中检查 DOM 元素的可见性？

检查 DOM 中元素的可见性

问题：

我们能否使用以下方法确定元素在 DOM 中是否可见JavaScript 不依赖像 jQuery 这样的外部库？如果是这样，我们应该考虑哪些属性来确保准确的可见性检查？

答案：

要检查纯 JavaScript 中的元素可见性，请考虑以下属性：

• display:“display”样式为“none”的元素被视为隐藏。
• 可见性：隐藏元素的“可见性”样式为“隐藏”。

要检查元素是否可见，可以使用以下代码：

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中文网其他相关文章！