html隱藏div元素的方法:1、在div標(biāo)簽中使用hidden屬性,添加“hidden="hidden"”語(yǔ)句即可。2、在div標(biāo)簽中使用style屬性,添加“display: none;”樣式即可。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
方法1:使用hidden屬性
html hidden 屬性規(guī)定對(duì)元素進(jìn)行隱藏。
如果使用該屬性,則會(huì)隱藏元素;隱藏的元素不會(huì)被顯示。
可以對(duì) hidden 屬性進(jìn)行設(shè)置,使用戶在滿足某些條件時(shí)才能看到某個(gè)元素(比如選中復(fù)選框,等等)。然后,可使用 JavaScript 來(lái)刪除 hidden 屬性,使該元素變得可見。
示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div hidden="hidden">這是一段隱藏的段落。</div> <div>這是一段可見的段落。</div> </body> </html>
效果圖:
方法2:使用display: none樣式
display 屬性規(guī)定元素應(yīng)該生成的框的類型。設(shè)置:
-
display: none;
隱藏對(duì)象 -
display: block;
除了轉(zhuǎn)換為塊級(jí)元素之外,還有顯示元素的意思
說(shuō)明:
使用display: none;
可以不占據(jù)空間的,把元素隱藏起來(lái),所以動(dòng)態(tài)改變此屬性時(shí)會(huì)引起重排(改變頁(yè)面布局),可以理解成在頁(yè)面中把該元素刪除掉一樣;不會(huì)被子孫繼承,但是其子孫是不會(huì)顯示的,畢竟都一起被隱藏了。
示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div style="display: none;">這是一段隱藏的段落。</div> <div>這是一段可見的段落。</div> </body> </html>
效果圖:
推薦教程:《html視頻教程》