如何仅使用 JavaScript 确定 DOM 中元素的可见性？-js教程-PHP中文网

如何仅使用 JavaScript 确定 DOM 中元素的可见性？

Barbara Streisand

发布： 2024-11-27 22:27:12

原创

860 人浏览过

How Can I Determine Element Visibility in the DOM Using Only JavaScript?

使用纯 JavaScript 确定 DOM 中元素的可见性

问题：

我们可以确定如果一个元素在 DOM 中可见而不依赖 jQuery？具体来说，我们应该检查哪些属性来确定其可见性？

答案：

根据 MDN 文档，如果元素或其任何祖先元素的 offsetParent 属性返回 null通过显示样式属性隐藏。然而，这假设该元素的位置不固定。如果页面上没有position:fixed元素，那么检查可见性的简洁脚本可以是：

function isHidden(el) {
    return (el.offsetParent === null);
}

登录后复制

如果页面上有position:fixed元素，我们遗憾地不得不求助于window .getCompulatedStyle() 进行彻底检查，这可能会对性能产生影响：

function isHidden(el) {
    var style = window.getComputedStyle(el);
    return (style.display === 'none');
}

登录后复制

尽管它对边缘情况敏感，但第二个选项提供了更高的清晰度。如果要重复执行该操作，请考虑第一个选项以提高效率，避免 window.getCompulatedStyle() 的性能损失。

以上是如何仅使用 JavaScript 确定 DOM 中元素的可见性？的详细内容。更多信息请关注PHP中文网其他相关文章！