检查元素在DOM中是否可见

Question

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

例如，在这个页面：Performance Bikes中，如果你将鼠标悬停在Deals（在顶部菜单上）上，就会出现一个Deals窗口，但一开始并没有显示出来。它在HTML中，但不可见。

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

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

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

还有其他我可能失踪的吗？

Answer 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可能更简单一些，因为它处理了更多的边缘情况，但我敢打赌，它的速度也要慢得多，所以如果你必须重复这个操作很多次，最好避免它。