通過display或visibility來隱藏html元素
來源:易賢網 閱讀:912 次 日期:2016-06-23 08:49:28
溫馨提示:易賢網小編為您整理了“通過display或visibility來隱藏html元素”,方便廣大網友查閱!

有些時候我們需要根據(jù)某些條件來控制web頁面中的html元素顯示還是隱藏,可以通過display或visibility來實現(xiàn)。通過下面的例子了解display和visibility的區(qū)別,簡單的例子代碼如下:

代碼如下:

<html>

<head>

<title>html元素的顯示與隱藏控制</title>

<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 onclick=showandhidden1(); value=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 onclick=showandhidden2(); value=div切換 />

</body>

</html>

更多信息請查看網頁制作
易賢網手機網站地址:通過display或visibility來隱藏html元素

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關于我們 | 聯(lián)系我們 | 人才招聘 | 網站聲明 | 網站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 加入群交流 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網安備53010202001879號 人力資源服務許可證:(云)人服證字(2023)第0102001523號
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號:hfpxwx
咨詢QQ:526150442(9:00—18:00)版權所有:易賢網