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

时间:2013-04-10 11:36:36

标签: jquery css

我想检查和排序隐藏的元素。是否可以找到属性为display且值为none的所有元素?

8 个答案:

答案 0 :(得分:472)

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

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

检查特定元素。

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

}
  

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

您还可以将is():visible

一起使用
if(!$('#yourID').is(':visible'))
{

}

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

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

}

如果您正在使用显示,则display可以有以下值。

  

display:none

     

显示:内联

     

显示:阻止

     

display:list-item

     

display:inline-block

查看可能的displayhere的完整列表。

使用JavaScript检查显示属性

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

答案 1 :(得分:48)

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

答案 2 :(得分:26)

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

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

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

答案 3 :(得分:10)

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

答案 4 :(得分:10)

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

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

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

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

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

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

答案 5 :(得分:10)

使用此条件:

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

答案 6 :(得分:0)

我个人更喜欢.is()或.length的另一种快捷方式:

if($('.myclass:visible')[0]){
   // is visible
}else {
   // is hidden
}

答案 7 :(得分:0)

Live demo

<div id="div" style="display: none"></div>
<button class="try">Try now</button>

<script type="text/javascript">
$(document).on('click','.try',function() {
var style = $('#div');
if (style.css("display") == "none") {
  alert("display not available");
}
});
</script>