有两种方法可以检查元素的可见度。

解决方案 # 1

if($('.selector').is(':visible')){
    // element is visible
}else{
    // element is hidden
}

解决方案 # 2

if($('.selector:visible')){
    // element is visible
}else{
    // element is hidden
}

缩略:visible根据j 查询文档:

• 他们有一个CSSdisplay价值的数值none.
• 它们是构成元素的构成元素,type="hidden".
• 它们的宽度和高度明确定为0。
• 隐藏了祖先元素,所以该元素不在页面上显示。

具有下列要素的要件要件:visibility: hidden或opacity: 0认为是可见的,因为它们仍在布局中消耗空间。

在某些情况中,这有用,而在另一些情况中则无用,因为如果你想检查该元素是否可见(如果您想检查该元素是否可见) 。display != none无视家长的能见度 你会发现.css("display") == 'none'不仅速度更快,而且还会正确返回可见度检查。

如果您要检查可见度而不是显示, 您应该使用 :.css("visibility") == "hidden".

也考虑到附加 jQuery 注释:

因为:visible是 jQuery 扩展名,不属于 CSS 规格的一部分,使用:visible无法利用本地DOM提供的绩效提升querySelectorAll()方法。在使用:visible选择元素,首先使用纯 CSS 选择器选择元素,然后使用.filter(":visible").

而且,如果你对工作表现很关心,你应该检查一下现在你看到我... 表现/隐藏表现(2010-05-04)。并使用其他方法显示和隐藏元素。

Demo 链接

$('#clickme').click(function() {
  $('#book').toggle('slow', function() {
    // Animation complete.
    alert($('#book').is(":visible")); //<--- TRUE if Visible False if Hidden
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">
  Click here
</div>
<img id="book" src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png" alt="" width="300"/>

来源(来自我的博客):

博客 Plug n Play - jQuery 工具及部件: 如何使用 jQuery 查看元素是否隐藏或可见 ?

您需要同时检查 显示和可见度 :

if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") {
    // The element is not visible
} else {
    // The element is visible
}

如果我们检查$(this).is(":visible"),j 查询自动检查这两个东西。

.is(":not(':hidden')") /*if shown*/

因为Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout(截至2004年12月1日jj 查询: 可见选择器- 我们可以检查元素是否真的以这种方式可见:

function isElementReallyHidden (el) {
    return $(el).is(":hidden") || $(el).css("visibility") == "hidden" || $(el).css('opacity') == 0;
}

var booElementReallyShowed = !isElementReallyHidden(someEl);
$(someEl).parents().each(function () {
    if (isElementReallyHidden(this)) {
        booElementReallyShowed = false;
    }
});