如何在JavaScript中快速检测元素是否不可见？

Question

在过去,我们使用CSS属性"display"来显示和隐藏DOM元素.要检查元素是否可见,我们可以使用:

element.offsetWidth > 0

由于Flash和Java Applet存在一些问题(它们在显示时停止:无),我们切换到CSS属性"visibility".

我现在正在寻找一种快速简便的方法来检查元素是否不可见.

我尝试过以下方法:

• 在元素和所有父元素上检查属性本身=>太慢
• 直接从浏览器检查计算出的样式(element.currentStyle或window.getComputedStyle()加上getPropertyValue(样式属性))=>也太慢

你知道其他任何方式或快捷方式,看看元素是否可见？

Answer 1

使用JQuery,你可以做到这一点

var isVisible = $('#foo').is(':visible'); 

Answer 2

Kent 的“切换元素可见性”是一种不显眼的、语义上有效的呈现内容的方式，对于不支持 CSS 的浏览器来说，这种方式会很好地降低性能。

• 页面完全加载后，我们爬行整个文档树并查找使用类名切换样式的块级元素。如果我们发现一个显示“切换已关闭”的元素，我们会立即通过隐藏类名来隐藏其下一个同级元素。
• 当我们找到一个时，我们告诉它监听鼠标点击。
• 当我们的一个宠物元素听到点击声时，它会立即采取行动，隐藏（或显示）其下一个可用的同级元素，就像我们在最初的爬行期间所做的那样。
• 所有三个类名称（切换、关闭和隐藏）都在 init 调用的底部输入，并且可以更改为任何有效的类名称。

另请参阅这篇DevX 文章，其中比较了“显示”和“可见性”属性。