检查元素在 DOM 中是否可见

Question

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

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

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

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

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

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

原文由 Hommer Smith 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 AlexZ 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对我来说，所有其他解决方案都因某些情况而中断..

在以下位置查看获胜答案：

http://plnkr.co/edit/6CSCA2fe4Gqt4jCBP2wu?p=preview

最终，我决定最好的解决方案是 $(elem).is(':visible') 但是，这不是纯 javascript。它是 jquery..

所以我偷看了他们的来源，找到了我想要的

jQuery.expr.filters.visible = function( elem ) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

这是来源： https ://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js

原文由 guy mograbi 发布，翻译遵循 CC BY-SA 3.0 许可协议