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