Home >Web Front-end >HTML Tutorial >Display and hide HTML elements through display or visibility
Display and hide HTML elements through display or visibility
- 不言Original
- 2018-05-08 14:45:002128browse
This article mainly introduces the display and hiding of HTML elements through display or visibility. It has a certain reference value. Now I share it with you. Friends in need can refer to it.
Need to use a certain Some conditions are used to control whether the HTML elements in the Web page are displayed or hidden. This can be achieved through display or visibility. Interested friends can read this article
Sometimes we need to control the HTML elements in the Web page according to certain conditions. Showing or hiding HTML elements can be achieved through display or visibility. Learn the difference between display and visibility through the following example. The simple example code is as follows:
Copy code
The code is as follows:
<html>
<head>
<title>HTML元素的显示与隐藏控制</title>
<script type="text/javascript">
function showAndHidden1(){
var p1=document.getElementById("p1");
var p2=document.getElementById("p2");
if(p1.style.display=='block') p1.style.display='none';
else p1.style.display='block';
if(p2.style.display=='block') p2.style.display='none';
else p2.style.display='block';
}
function showAndHidden2(){
var p3=document.getElementById("p3");
var p4=document.getElementById("p4");
if(p3.style.visibility=='visible') p3.style.visibility='hidden';
else p3.style.visibility='visible';
if(p4.style.visibility=='visible') p4.style.visibility='hidden';
else p4.style.visibility='visible';
}
</script>
</head>
<body>
<p>display：元素的位置不被占用</p>
<p id="p1" style="display:block;">p 1</p>
<p id="p2" style="display:none;">p 2</p>
<input type="button" onclick="showAndHidden1();" value="p切换" />
<hr>
<p>visibility：元素的位置仍被占用</p>
<p id="p3" style="visibility:visible;">p 3</p>
<p id="p4" style="visibility:hidden;">p 4</p>
<input type="button" onclick="showAndHidden2();" value="p切换" />
</body>
</html>The above is the detailed content of Display and hide HTML elements through display or visibility. For more information, please follow other related articles on the PHP Chinese website!