检查元素在DOM中是否可见

Question

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

因此，例如，在此页面中：PerformanceBikes，如果将鼠标悬停在Deals上（在顶部菜单上），则会显示一个交易窗口，但开始时未显示。它在HTML中，但不可见。

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

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

但它似乎不起作用。我想知道应该检查哪些属性。我想到：

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

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

Answer 1

根据此MDN文档，每当元素或元素的任何父元素通过显示样式属性被隐藏时，元素的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可能会更直接一些，因为它可以处理更多的边缘情况，但是我敢打赌，它的处理速度也要慢得多，因此，如果您必须多次重复执行此操作，则最好避免使用它。