javascript隱藏顯示div的兩種方式實(shí)例
更新時(shí)間：2022年09月01日 11:10:53 作者：卡卡羅特D
這篇文章主要給大家介紹了關(guān)于javascript隱藏顯示div的兩種方式,實(shí)現(xiàn)的代碼很簡(jiǎn)單,點(diǎn)擊時(shí)先判斷div是否是顯示,如果div是顯示就把div設(shè)置為隱藏,否則就變?yōu)轱@示,需要的朋友可以參考下
設(shè)置方法：
1、使用style對(duì)象的display屬性，值為“none”可隱藏div元素，值為“block”可顯示元素；
2、使用style對(duì)象的visibility屬性，值為“hidden”可隱藏div元素，值為“visible”可顯示元素。
本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。
JS隱藏和顯示div的方式有兩種：
方式一：設(shè)置元素style對(duì)象中的display屬性
var t = document.getElementById('test');//選取id為test的div元素
t.style.display = 'none';// 隱藏選擇的元素
t.style.display = 'block';// 以塊級(jí)樣式顯示方式二：設(shè)置元素style對(duì)象中的visibility屬性
var t = document.getElementById('test');//選取id為test的div元素
t.style.visibility = 'hidden';// 隱藏元素
t.style.visibility = 'visible';// 顯示元素這兩種方式的區(qū)別是：設(shè)置display隱藏后不占用原來(lái)的位置，而通過(guò)visibility進(jìn)行隱藏后元素位置任然被占用。
效果如下所示：
第一種方式隱藏前
隱藏后不占用原來(lái)的位置
第二種方式隱藏前
第二種方式隱藏后，任然占據(jù)原來(lái)的位置。
完整代碼如下：
<head>
<script type="text/javascript">
function fn1(){
var t = document.getElementById('test');
if(t.style.display === 'none') {
t.style.display = 'block';// 以塊級(jí)元素顯示
} 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;">
這是一個(gè)將要隱藏的DIV。<br>
這是一個(gè)將要隱藏的DIV。<br>
這是一個(gè)將要隱藏的DIV。<br>
這是一個(gè)將要隱藏的DIV。<br>
</div>
<button onclick="fn1()">第一種方式</button>
<button onclick="fn2()">第二種方式</button>
</body>總結(jié)
到此這篇關(guān)于javascript隱藏顯示div的文章就介紹到這了,更多相關(guān)js隱藏顯示div內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
微信小程序js時(shí)間戳與日期格式的轉(zhuǎn)換方法
這篇文章主要給大家介紹了關(guān)于微信小程序js時(shí)間戳與日期格式的轉(zhuǎn)換方法,在小程序中使用時(shí)間選擇器時(shí),獲取到的時(shí)間可能是一個(gè)時(shí)間戳,這并不是我們想要的,這時(shí)候我們得將獲取到的時(shí)間戳進(jìn)行轉(zhuǎn)換,需要的朋友可以參考下2023-10-10
事件是用來(lái)描述網(wǎng)頁(yè)中某一特定有趣時(shí)刻的，眾所周知事件通常是在由用戶和瀏覽器進(jìn)行交互時(shí)觸發(fā)，其實(shí)不然，通過(guò)Javascript可以在任何時(shí)間觸發(fā)特定的事件，并且這些事件與瀏覽器創(chuàng)建的事件是相同的2012-06-06
js實(shí)現(xiàn)類似新浪微博首頁(yè)內(nèi)容漸顯效果的方法
這篇文章主要介紹了js實(shí)現(xiàn)類似新浪微博首頁(yè)內(nèi)容漸顯效果的方法,實(shí)例分析了漸顯效果的實(shí)現(xiàn)要點(diǎn)與方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
下面小編就為大家分享一篇js 取消頁(yè)面可以選中文字的功能方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
js將滾動(dòng)條滾動(dòng)到指定位置的簡(jiǎn)單實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇js將滾動(dòng)條滾動(dòng)到指定位置的簡(jiǎn)單實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的， 現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
使用json來(lái)定義函數(shù),在里面可以定義多個(gè)函數(shù)的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇使用json來(lái)定義函數(shù),在里面可以定義多個(gè)函數(shù)的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
我們?cè)陂_(kāi)發(fā)中常遇到一種情況,在創(chuàng)建一個(gè)元素之后,需要給它綁定事件,這篇文章主要給大家介紹了關(guān)于js為新添加元素添加綁定事件的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
javascript中的this應(yīng)用非常廣泛，對(duì)js中this總是似是而非的感覺(jué)，今天小編豁然開(kāi)朗，然后再次給大家談?wù)搄s中的this關(guān)鍵，感興趣的朋友跟著小編一起看看吧2016-06-06
微信小程序后端無(wú)法保持session的原因及解決辦法問(wèn)題
這篇文章主要介紹了微信小程序后端無(wú)法保持session的原因及解決辦法問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
原生JavaScript實(shí)現(xiàn)批量獲取表單數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了如何使用原生JavaScript實(shí)現(xiàn)批量獲取表單數(shù)據(jù),文中的示例代碼講解詳細(xì),有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01