當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML元素显示与隐藏

發(fā)布時(shí)間：2023/12/1 HTML 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML元素显示与隐藏小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

在WEB開發(fā)中，前臺HTML中經(jīng)常需要控制元素的隱藏與顯示，我們最為最常見是二級導(dǎo)航欄（通過鼠標(biāo)的移動來觸發(fā)onmouseover，onmouseout事件來實(shí)現(xiàn)二級菜單的顯示與隱藏）二級菜單的顯示與隱藏。

然而控制元素的影響與顯示有兩種方式：

1、display :?設(shè)置如何及是否顯示某元素

2、visibility :?設(shè)置元素可見或不可見

Example:

<html> <head> <title>HTML元素的顯示與隱藏控制</title> <style type="text/css"> #div1,#div3{width:50px;height:50px;background:cyan; }#div2,#div4{width:50px;height:80px;background:gray; } </style> <script type="text/javascript"> function showAndHidden1(){var div1=document.getElementById("div1");var div2=document.getElementById("div2");if(div1.style.display=='block') div1.style.display='none';else div1.style.display='block';if(div2.style.display=='block') div2.style.display='none';else div2.style.display='block'; }function showAndHidden2(){var div3=document.getElementById("div3");var div4=document.getElementById("div4");if(div3.style.visibility=='visible') div3.style.visibility='hidden';else div3.style.visibility='visible';if(div4.style.visibility=='visible') div4.style.visibility='hidden';else div4.style.visibility='visible'; } </script> </head> <body> <div>display：元素的位置不被占用</div> <div id="div1" style="display:block;">DIV 1</div> <div id="div2" style="display:none;">DIV 2</div> <input type="button" οnclick="showAndHidden1();" value="display切換DIV" /> <hr> <div>visibility：元素的位置仍被占用</div> <div id="div3" style="visibility:visible;">DIV 3</div> <div id="div4" style="visibility:hidden;">DIV 4</div> <input type="button" οnclick="showAndHidden2();" value="visibility屬性切換DIV "/> </body> </html>

Result：

小結(jié)：

? ? ? ? display 和visibility同時(shí)可以實(shí)現(xiàn)對元素的隱藏和顯示，區(qū)別在于visibility屬性做到的是將html元素隱藏，但其元素（即使是隱藏狀態(tài)）的所在的位置獨(dú)占，而display屬性操作html元素則不會想這樣，display屬性操作的是元素的類型inline,block,none這些屬性直接關(guān)系到元素的大小及存在與否。

用關(guān)于display和visibility曾遇到過：

? ? ? ? 寫二級導(dǎo)航欄菜單，當(dāng)時(shí)用display來實(shí)現(xiàn)二級菜單的顯示與隱藏時(shí)，結(jié)果發(fā)現(xiàn)在第一次訪問或者刷新后第一次訪問，鼠標(biāo)移動到一級菜單時(shí)二級子菜單感覺就想刷新不出來一樣，用visibility實(shí)現(xiàn)則不會出現(xiàn)像這樣的問題。

總結(jié)

以上是生活随笔為你收集整理的HTML元素显示与隐藏的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

元素
html