JS中style.display和style.visibility的區(qū)別實(shí)例說明
更新時(shí)間:2013年03月27日 14:54:07 作者:
下面的例子說明了這種區(qū)別:在這個(gè)例子中,divContent1和divContent2隱藏的時(shí)候用的是style.display=none,這時(shí)候,后面的div會(huì)向上移動(dòng),占據(jù)已經(jīng)隱藏的div的空間。divContent3和divContent4用的是style.visibility=hidden來隱藏,但是其隱藏后仍然占據(jù)原來的空間
在JS中可以通過設(shè)置style.display或者style.visibility屬性來控制元素是否顯示,在style.display=block和style.visibility=visible的時(shí)候,元素被顯示,在style.display=none和style.visibility=hidden的時(shí)候,元素被隱藏。它們之間最大的區(qū)別是通過style.display=none隱藏的時(shí)候,元素不占據(jù)原來的位置,從文檔流中脫離,后續(xù)的元素填補(bǔ)其位置。通過style.visibility=hidden隱藏的時(shí)候,元素仍然占據(jù)原來的位置,只是被隱藏。
下面的例子說明了這種區(qū)別:在這個(gè)例子中,divContent1和divContent2隱藏的時(shí)候用的是style.display=none,這時(shí)候,后面的div會(huì)向上移動(dòng),占據(jù)已經(jīng)隱藏的div的空間。divContent3和divContent4用的是style.visibility=hidden來隱藏,但是其隱藏后仍然占據(jù)原來的空間。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
下面的例子說明了這種區(qū)別:在這個(gè)例子中,divContent1和divContent2隱藏的時(shí)候用的是style.display=none,這時(shí)候,后面的div會(huì)向上移動(dòng),占據(jù)已經(jīng)隱藏的div的空間。divContent3和divContent4用的是style.visibility=hidden來隱藏,但是其隱藏后仍然占據(jù)原來的空間。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
相關(guān)文章
javascript 設(shè)置文本框中焦點(diǎn)的位置
設(shè)置文本框中焦點(diǎn)的位置的實(shí)現(xiàn)代碼2009-11-11菜鳥也能搞懂js中typeof與instanceof區(qū)別
instanceof和typeof是兩個(gè)運(yùn)算符,在程序設(shè)計(jì)中用到,常用來判斷一個(gè)變量是否為空,或者是什么類型的,本文就來介紹一下typeof與instanceof區(qū)別,感興趣的可以了解一下2021-09-09一個(gè)Action如何調(diào)用兩個(gè)不同的方法
這篇文章主要介紹了一個(gè)Action如何調(diào)用兩個(gè)不同的方法,需要的朋友可以參考下2014-05-05JS實(shí)現(xiàn)的用來對(duì)比兩個(gè)用指定分隔符分割的字符串是否相同
這篇文章主要介紹了JS實(shí)現(xiàn)的用來對(duì)比兩個(gè)用指定分隔符分割的字符串是否相同,本文代碼為特殊需要而寫,需要的朋友可以參考下2014-09-09