检查元素在 DOM 中是否可见

小编典典

检查元素在 DOM 中是否可见

all

有什么方法可以检查一个元素在纯 JS（没有 jQuery）中是否可见？

因此，例如，在此页面：Performance
Bikes中，如果您将鼠标悬停在“交易”上（在顶部菜单上），则会出现一个交易窗口，但一开始并未显示。它在
HTML 中，但不可见。

那么，给定一个 DOM 元素，我如何检查它是否可见？我试过了：

window.getComputedStyle(my_element)['display']);

但它似乎没有工作。我想知道我应该检查哪些属性。我想到了：

display !== 'none'
visibility !== 'hidden'

还有其他我可能会想念的吗？

阅读 145

2022-03-13

共1个答案

小编典典

根据这个 MDN 文档，当一个元素或其任何父元素通过 display style
属性隐藏时，它的offsetParent属性就会返回。null只要确保元素没有固定。如果页面上没有position: fixed;元素，则检查此内容的脚本可能如下所示：

// Where el is the DOM element you'd like to test for visibility
function isHidden(el) {
    return (el.offsetParent === null)
}

另一方面，如果您确实
有可能在此搜索中被捕获的位置固定元素，那么您将遗憾地（并且慢慢地）必须使用window.getComputedStyle(). 这种情况下的功能可能是：

// Where el is the DOM element you'd like to test for visibility
function isHidden(el) {
    var style = window.getComputedStyle(el);
    return (style.display === 'none')
}

选项 #2 可能更简单一些，因为它考虑了更多的边缘情况，但我敢打赌它也会慢很多，所以如果你必须多次重复这个操作，最好避免它。

2022-03-13