快捷導航

javascript隱藏顯示div的兩種方式實例

更新時間：2022年09月01日 11:10:53 作者：卡卡羅特D

這篇文章主要給大家介紹了關(guān)于javascript隱藏顯示div的兩種方式,實現(xiàn)的代碼很簡單,點擊時先判斷div是否是顯示,如果div是顯示就把div設(shè)置為隱藏,否則就變?yōu)轱@示,需要的朋友可以參考下

設(shè)置方法：

1、使用style對象的display屬性，值為“none”可隱藏div元素，值為“block”可顯示元素；

2、使用style對象的visibility屬性，值為“hidden”可隱藏div元素，值為“visible”可顯示元素。

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

JS隱藏和顯示div的方式有兩種：

方式一：設(shè)置元素style對象中的display屬性

var t = document.getElementById('test');//選取id為test的div元素
t.style.display = 'none';// 隱藏選擇的元素
t.style.display = 'block';// 以塊級樣式顯示

方式二：設(shè)置元素style對象中的visibility屬性

var t = document.getElementById('test');//選取id為test的div元素
t.style.visibility = 'hidden';// 隱藏元素
t.style.visibility = 'visible';// 顯示元素

這兩種方式的區(qū)別是：設(shè)置display隱藏后不占用原來的位置，而通過visibility進行隱藏后元素位置任然被占用。

效果如下所示：

第一種方式隱藏前

隱藏后不占用原來的位置

第二種方式隱藏前

第二種方式隱藏后，任然占據(jù)原來的位置。

完整代碼如下：

<head>
    <script type="text/javascript">
        function fn1(){
            var t = document.getElementById('test');
            if(t.style.display === 'none') {
                t.style.display = 'block';// 以塊級元素顯示
            } else {
                t.style.display = 'none'; // 隱藏
            }
        }

        function fn2(){
            var t = document.getElementById('test');
            if(t.style.visibility === 'hidden') {
                t.style.visibility = 'visible';
            } else {
                t.style.visibility = 'hidden';
            }
        }
    </script>

</head>

<body>
    <div id="test" style="border: solid 1px #e81515; width:500px;">
        這是一個將要隱藏的DIV。<br>
        這是一個將要隱藏的DIV。<br>
        這是一個將要隱藏的DIV。<br>
        這是一個將要隱藏的DIV。<br>
    </div>

    <button onclick="fn1()">第一種方式</button>
    <button onclick="fn2()">第二種方式</button>
</body>