通过display或visibility来实现HTML元素的显示与隐藏

　　需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏，可以通过display或visibility来实现，感兴趣的朋友可以了解下本文

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

　　复制代码

　　代码如下:

<html>

<head>

<title>HTML元素的显示与隐藏控制</title>

<scripttype="text/javascript">

　　functionshowAndHidden1(){

　　varp1=document.getElementById("p1");

　　varp2=document.getElementById("p2");

　　if(p1.style.display=='block')p1.style.display='none';

　　elsep1.style.display='block';

　　if(p2.style.display=='block')p2.style.display='none';

　　elsep2.style.display='block';

　　}

　　functionshowAndHidden2(){

　　varp3=document.getElementById("p3");

　　varp4=document.getElementById("p4");

　　if(p3.style.visibility=='visible')p3.style.visibility='hidden';

　　elsep3.style.visibility='visible';

　　if(p4.style.visibility=='visible')p4.style.visibility='hidden';

　　elsep4.style.visibility='visible';

　　}

</script>

</head>

<body>

display：元素的位置不被占用

<pid="p1"style="display:block;">p1

<pid="p2"style="display:none;">p2

<inputtype="button"onclick="showAndHidden1();"value="p切换"/>

<hr>

visibility：元素的位置仍被占用

<pid="p3"style="visibility:visible;">p3

<pid="p4"style="visibility:hidden;">p4

<inputtype="button"onclick="showAndHidden2();"value="p切换"/>

</body>

</html>

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h55042.shtml