首頁 > 開發者 > JavaScript
在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來隱藏，但是其隱藏後仍然佔據原來的空間。
<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 > click here(內容部分會隱藏，下面的內容會上來) this is some content to show and hide <p> </p> click here this is some content to show and hide <p> </p> click here(內容部分會隱藏，下面的內容不會上來) this is some content to show and hide <p> </p> click here this is some content to show and hide </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
