如何通过javascript检查元素的可见性？

Question

我对检查一个元素是否显示的方式感兴趣:none style explicility(即style ="display:none"),有一个具有(或继承)此样式的类,或者其中一个父元素被隐藏(和我的元素继承了这个)

情况1:

<body><div><span style="display:none;">Some hidden text</span></div>

要么

<body><div style="display:none;"><span>Some hidden text</span></div>

案例2:

SomeClass {   display:none;   }
<body><div class="SomeClass"><span>Some hidden text</span></div>

谢谢,

Answer 1

您正在寻找两种不同方案的解决方案.

第一种情况是获取css属性的级联/计算样式.请参阅此答案以了解如何执行此操作.

第二种情况是检测是否隐藏了任何元素的父项.这需要遍历并且繁琐且缓慢.

您可以采用此处概述的解决方案(并从1.3.2开始采用jQuery/Sizzle ),并阅读元素的维度:

var isVisible = element.offsetWidth > 0 || element.offsetHeight > 0;

如果它具有尺寸,那么它在文档中占据一些矩形空间(无论多小)的意义上是可见的.请注意,对于某些浏览器中的某些元素,此技术仍有一些缺点,但在大多数情况下应该可以使用.

jQuery/Sizzle 1.3.2链接已损坏,您现在可以[在此处找到](https://github.com/jquery/jquery/blob/1.3.2/src/selector.js#L961). (3认同)

Answer 2

这是确定元素是否可见的最快，最简单的方法。

function is_visible(e) {return e.offsetWidth > 0 || e.offsetHeight > 0;}