检查元素在 DOM 中是否可见

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

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

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

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

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

我可能还缺少其他人吗？

根据这个 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)
}

另一方面，如果你do有位置固定的元素可能会在此搜索中被捕获，您将遗憾地（并且慢慢地）必须使用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 可能更简单一些，因为它考虑了更多的边缘情况，但我敢打赌它也会慢很多，所以如果您必须多次重复此操作，最好避免它。