快捷導(dǎo)航

JS中style.display和style.visibility的區(qū)別實例說明

更新時間：2013年03月27日 14:54:07 作者：

下面的例子說明了這種區(qū)別：在這個例子中，divContent1和divContent2隱藏的時候用的是style.display=none，這時候，后面的div會向上移動，占據(jù)已經(jīng)隱藏的div的空間。divContent3和divContent4用的是style.visibility=hidden來隱藏，但是其隱藏后仍然占據(jù)原來的空間

在JS中可以通過設(shè)置style.display或者style.visibility屬性來控制元素是否顯示，在style.display=block和style.visibility=visible的時候，元素被顯示，在style.display=none和style.visibility=hidden的時候，元素被隱藏。它們之間最大的區(qū)別是通過style.display=none隱藏的時候，元素不占據(jù)原來的位置，從文檔流中脫離，后續(xù)的元素填補(bǔ)其位置。通過style.visibility=hidden隱藏的時候，元素仍然占據(jù)原來的位置，只是被隱藏。

下面的例子說明了這種區(qū)別：在這個例子中，divContent1和divContent2隱藏的時候用的是style.display=none，這時候，后面的div會向上移動，占據(jù)已經(jīng)隱藏的div的空間。divContent3和divContent4用的是style.visibility=hidden來隱藏，但是其隱藏后仍然占據(jù)原來的空間。

<html> <head> <title>test</title> <meta http-equiv=content-type content="text/html; charset=gb2312"> <style> .titlediv{background-color: #505050;color:white;font-weight:bold;padding:10px;cursor:pointer } .contentdiv{border:3px solid #505050;height:100px;padding:10px; } </style>  </head> <body > <div   id="wppm3vysvbp"   class="titlediv" onClick="toggle('divContetn1')">click here(內(nèi)容部分會隱藏，下面的內(nèi)容會上來)</div> <div   id="wppm3vysvbp"   class="contentdiv" id="divContetn1">this is some content to show and hide </div> <p> </p> <div   id="wppm3vysvbp"   class="titlediv" onClick="toggle('divContetn2')">click here</div> <div   id="wppm3vysvbp"   class="contentdiv" id="divContetn2">this is some content to show and hide </div> <p> </p> <div   id="wppm3vysvbp"   class="titlediv" onClick="showhide('divContetn3')">click here(內(nèi)容部分會隱藏，下面的內(nèi)容不會上來)</div> <div   id="wppm3vysvbp"   class="contentdiv" id="divContetn3">this is some content to show and hide </div> <p> </p> <div   id="wppm3vysvbp"   class="titlediv" onClick="showhide('divContetn4')">click here</div> <div   id="wppm3vysvbp"   class="contentdiv" id="divContetn4">this is some content to show and hide </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

相關(guān)文章

每周一練之數(shù)據(jù)結(jié)構(gòu)與算法（Stack）
這篇文章主要介紹了數(shù)據(jù)結(jié)構(gòu)與算法（Stack），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
詳解JavaScript如何設(shè)置私有屬性
這篇文章主要為大家詳細(xì)介紹了在JavaScript中如何設(shè)置私有屬性,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,有需要的小伙伴可以參考下
2024-03-03
JS+CSS實現(xiàn)的漂亮漸變背景特效代碼(6個漸變效果)
這篇文章主要介紹了JS+CSS實現(xiàn)的漂亮漸變背景特效代碼,包含6個漸變效果,涉及JavaScript針對頁面元素屬性動態(tài)操作的相關(guān)技巧,需要的朋友可以參考下
2016-03-03
JavaScript中使用Substring刪除字符串最后一個字符
刪除字符串最后一個字符的方法有很多，在本文將為大家介紹下js中的substring是如何做到的，需要的朋友可以參考下
2013-11-11
JavaScript實現(xiàn)LRU算法的示例詳解
不知道屏幕前的朋友們，有沒有和我一樣，覺得LRU算法原理很容易理解，實現(xiàn)起來卻很復(fù)雜。所以本文就為大家整理了一下實現(xiàn)的示例代碼，需要的可以參考一下
2023-04-04
輕松學(xué)習(xí)Javascript閉包
閉包（closure）是Javascript語言的一個難點，也是它的特色，很多高級應(yīng)用都要依靠閉包實現(xiàn)。這篇文章主要介紹了Javascript閉包,需要的朋友可以參考下
2017-03-03
JavaScript進(jìn)階之前端文件上傳和下載示例詳解
這篇文章主要為大家介紹了JavaScript進(jìn)階之前端文件上傳和下載示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
LazyLoad 延遲加載(按需加載)
大型網(wǎng)站往往很矛盾，想用戶在首頁看到更多東西，又不想浪費太多服務(wù)器流量。比如一個有3屏的首頁。可能50%的用戶進(jìn)首頁的目的是點擊首頁的連接，到子頁面。
2010-05-05
JavaScript本地數(shù)據(jù)存儲sessionStorage與localStorage使用詳解
這篇文章主要介紹了JavaScript本地數(shù)據(jù)存儲sessionStorage與localStorage使用，localStorage：永久存儲在本地，適合保存在本地的數(shù)據(jù)。sessionStorage：會話級的存儲，敏感帳號一次登陸
2022-10-10
js以對象為索引的關(guān)聯(lián)數(shù)組
在代碼邏輯中更多的是用關(guān)聯(lián)數(shù)組的方式。但即使是這樣我們也很少使用對象類型作為鍵值對的鍵名。
2010-07-07