今天写前端的动态逻辑时，遇到个需要判断元素是否隐藏的需求。适用jq插件可以很方便的来检测元素是否处于隐藏的状态，下面就介绍几种方法。

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、使用jquery内置的选择器

(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 用法，它们两个的作用是相反的！