首頁  >  文章  >  web前端  >  JS中style.display和style.visibility的差別實例說明_javascript技巧

JS中style.display和style.visibility的差別實例說明_javascript技巧

WBOY
WBOY原創
2016-05-16 17:39:201292瀏覽

在JS中可以透過設定style.display或style.visibility屬性來控制元素是否顯示,在style.display=block和style.visibility=visible的時候,元素被顯示,在style.display=none和style.visibility= hidden的時候,元素被隱藏。它們之間最大的差異是透過style.display=none隱藏的時候,元素不佔據原來的位置,從文件流中脫離,後續的元素填補其位置。透過style.visibility=hidden隱藏的時候,元素仍然佔據原來的位置,只是被隱藏。

下面的例子說明了這種區別:在這個例子中,divContent1和divContent2隱藏的時候用的是style.display=none,這時候,後面的div會向上移動,佔據已經隱藏的div的空間。 divContent3和divContent4用的是style.visibility=hidden來隱藏,但隱藏後仍佔據原來的空間。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn