如何判断一个特定的DOM元素是否可见？

Question

使用 jQuery，确定特定元素是否可见的最简单方法是什么？我的意思不是在当前视口内可见，而是在页面上可见。

理想情况下，如果元素或其任何祖先具有 CSS 规则（例如 display: none 或 visibility: hide），则该函数应返回 false。无需担心overflow:hidden。

Answer 1

将 :visible 选择器与 is 方法结合使用。

if($('elementSelector').is(':visible')){
   //Element is visible
}

Answer 2

您可以使用 is() 方法。

$('#element').is(':visible');

Answer 3

$('div:visible'); 将返回所有可见的 div。

另外，值得注意的是 jQuery 1.3.2 变更日志：

在 jQuery 1.3.2 中，如果浏览器报告的 offsetWidth 或 offsetHeight 大于 0，则元素可见。这意味着如果元素的 CSS 显示为“none”，或其任何父/祖先元素的显示为“none” "，或者如果元素的宽度为 0 并且元素的高度为 0，则该元素将被报告为隐藏。

Answer 4

http://api.jquery.com/visible-selector/

$('#mydiv').is(":visible");