使用jQuery检查元素是否为“ display:none”或单击是否阻塞


Answers:


542

您可以使用:visible表示可见元素,并使用:hidden找出隐藏元素。此隐藏元素的display属性设置为none

hiddenElements = $(':hidden');
visibleElements = $(':visible');

检查特定元素。

if($('#yourID:visible').length == 0)
{

}

如果元素占用了文档中的空间,则认为它们是可见的。可见元素的宽度或高度大于零, 参考

您也可以将is():visible

if(!$('#yourID').is(':visible'))
{

}

如果要检查显示值,则可以使用css()

if($('#yourID').css('display') == 'none')
{

}

如果使用显示,则display可以具有以下值。

显示:无

显示:内联

显示:块

显示:列表项

显示:内联块

在此处检查可能display值的完整列表。

使用JavaScript检查display属性

var isVisible = document.getElementById("yourID").style.display == "block";
var isHidden = document.getElementById("yourID").style.display == "none"; 

好吧,在我的情况下,每个元素都有一个ID,所以这个技巧对我有用:)
Nicholas Francis

2
@NicholasFrancis,我更新了答案,以查找所有隐藏的元素。
阿迪尔

它也检查内联的CSS。我有display: block;来自jQuery的CSS 内联代码。我无法使用您的方法进行检查。帮我。
Gaurav Manral 2014年

是否添加了jQuery,并且在添加到DOM之后正在访问元素?你能告诉我代码吗?最好在jsfiddle.net
Adil

什么是JavaScript等效项?
TheBlackBenzKid

56
$("element").filter(function() { return $(this).css("display") == "none" });

7
+1:这其实是更有用比接受的答案的问题问,因为这会工作,即使父元素都有style="display: none;"。如果您希望特定的元素可见性并且使用父元素被隐藏,则使用:visible和的答案:hidden将会失败,因为那些选择器会返回页面的整体可见性(这不是所要问的问题)。
Gone Coding

在JS DOM环境中运行单元测试时,此方法有效。
b01 2016年

对于Tabbing插件,它是visibility: 'hidden';在CSS 中设置的,因此检查最终还检查:$(this).css('visibility') != 'hidden'
phyatt

30

是的,您可以使用css函数。下面将搜索所有div,但是您可以根据需要修改它

$('div').each(function(){

    if ( $(this).css('display') == 'none')
    {
       //do something
    }
});

13

使用以下条件:

if (jQuery(".profile-page-cont").css('display') == 'block'){
    // Condition 
}

11

jQuery中有两种方法来检查可见性:

$("#selector").is(":visible")

$("#selector").is(":hidden")

您还可以根据选择器中的可见性执行命令;

$("#selector:visible").hide()

要么

$("#selector:hidden").show()

6
注意:正如问题所要求的那样,这将返回所选元素的特定可见属性,这:visible也取决于父祖先的可见性。如果祖先是祖先,则display: none无论其display状态如何,所有后代都不可见。
Gone Coding,2014年

10
$('#selector').is(':visible');

3
注意:正如问题所要求的那样,这将返回所选元素的特定可见属性,这:visible也取决于父祖先的可见性。如果祖先是祖先,则display: none无论其display状态如何,所有后代都不可见。
Gone Coding,2014年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.