控制HTML元素的显示与隐藏——display和visibility

有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏，可以通过display或visibility来实现。通过下面的例子了解display和visibility的区别，简单的例子代码如下：

 

<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>

 

posted @ 2016-07-12 15:13  费曼带我飞  阅读(711)  评论(0)  编辑  收藏  举报