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>

国产视频appPS:上面兩個代碼的效果都是一樣的,只是判斷的方式不同而已,一個判斷是否隱藏,一個判斷是否顯示。

jq代碼判斷div是否隱藏

jq判斷是否隱藏:

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

注意:

国产视频app1、代碼返回的結果為布爾值

国产视频app2、true 表示元素已隱藏,不再顯示

国产视频app3、false 表示元素未被隱藏,一直顯示

JS判斷是否顯示

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

注意:

1、代碼返回的結果同樣為布爾值

国产视频app2、false 表示元素已隱藏,不再顯示

3、true 表示元素顯示,未被隱藏