溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關javascript如何隱藏顯示div的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
1、js屬于一種解釋性腳本語言；2、在絕大多數瀏覽器的支持下，js可以在多種平臺下運行，擁有著跨平臺特性；3、js屬于一種弱類型腳本語言，對使用的數據類型未做出嚴格的要求，能夠進行類型轉換，簡單又容易上手；4、js語言安全性高，只能通過瀏覽器實現信息瀏覽或動態交互，從而有效地防止數據的丟失；5、基于對象的腳本語言，js不僅可以創建對象，也能使用現有的對象。
設置方法：1、使用style對象的display屬性，值為“none”可隱藏div元素，值為“block”可顯示元素；2、使用style對象的visibility屬性，值為“hidden”可隱藏div元素，值為“visible”可顯示元素。
本教程操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。
JS隱藏和顯示div的方式有兩種：
方式一：設置元素style對象中的display屬性
var t = document.getElementById('test');//選取id為test的div元素
t.style.display = 'none';// 隱藏選擇的元素
t.style.display = 'block';// 以塊級樣式顯示方式二：設置元素style對象中的visibility屬性
var t = document.getElementById('test');//選取id為test的div元素
t.style.visibility = 'hidden';// 隱藏元素
t.style.visibility = 'visible';// 顯示元素這兩種方式的區別是：設置display隱藏后不占用原來的位置，而通過visibility進行隱藏后元素位置任然被占用。
效果如下所示：
第一種方式隱藏前
隱藏后不占用原來的位置
第二種方式隱藏前
第二種方式隱藏后，任然占據原來的位置。
完整代碼如下：
<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>感謝各位的閱讀！關于“javascript如何隱藏顯示div”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
