hi,欢迎访问本站!
当前位置: 首页Web前端正文

jquery怎么判断元素是否隐藏

墨初 Web前端 623阅读

jquery判断元素是否处于隐藏状态,有多种方法。但大致的逻辑都是判断div的CSS隐藏属性,下面是判断方法。

jquery判断元素是否隐藏的方法

方法1:

JQ判断元素的CSS样式中的 display 属性,元素css样式的 display 属性的值如果设置为 none ,则元素会被隐藏。通过jq获取css的 display 的属性值是否为 none,来判断元素是否为隐藏状态。

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<style>
    #main{
        display: none;
    }
</style>
<div id="main">
    我是被隐藏的!
</div>
<script>
    var isnone = $('#main').css('display');
    if(isnone == 'none'){
        // 元素隐藏
    }else{
        // 元素没有被隐藏
    }
</script>

方法2:

使用jq内置的选择器进行判断,其有两种判断方式。

(1)、:hidden 判断是否为隐藏状态

if($("#main").is(":hidden")){
    console.log('隐藏状态');
}else{
    console.log('显示状态');
}

(2)、:visible 判断是否为显示状态

if($("#main").is(":visible")){
    console.log('显示状态');
}else{
    console.log('隐藏状态');
}

PS:注意jquery选择器 :hidden 与 :visible 用法,它们两个的作用是相反的!

标签:
声明:无特别说明,转载请标明本文来源!