js脚本在控制div元素在显示与隐藏之间进行切换时,如果不能确定div当前的状态,切换时往往会发生一些逻辑错误的事情,导致div元素的动态效果在切换时不是很流畅。那么飞鸟慕鱼博客就来说一说,如何判断div当前是否处于隐藏的状态方法。

html代码

<div id="mochu" style="display: none;">
飞鸟慕鱼博客
我是隐藏状态的元素,你看不到我的
</div>

以下所以的示例代码,都以判断此DIV元素为例

原生js判断DIV是否隐藏的代码

示例代码:

<script>
    //判断是否隐藏
    if (document.getElementById("mochu").style.display === 'none') { 
        console.log('已隐藏');
    }else{
        console.log('没有隐藏');
    }
    //判断是否显示
    if (document.getElementById("mochu").style.display === 'block') { 
        console.log('没有隐藏');
    }else{
        console.log('已隐藏');
    }
    //都输出 已隐藏
</script>

PS:上面两个代码的效果都是一样的,只是判断的方式不同而已,一个判断是否隐藏,一个判断是否显示。

jq代码判断div是否隐藏

jq判断是否隐藏:

<script>
    var s = $("#mochu").is(":hidden");
    console.log(s);
    //输出 true
</script>

注意:

1、代码返回的结果为布尔值

2、true 表示元素已隐藏,不再显示

3、false 表示元素未被隐藏,一直显示

JS判断是否显示

<script>
    var r = $("#mochu").is(":visible"); 
    console.log(r);
    //输出 false
</script>

注意:

1、代码返回的结果同样为布尔值

2、false 表示元素已隐藏,不再显示

3、true 表示元素显示,未被隐藏