Home > Article > Web Front-end > Display and hide HTML elements through display or visibility

Display and hide HTML elements through display or visibility

不言Original: 2018-05-08 14:45:002106browse

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==&#39;block&#39;) p1.style.display=&#39;none&#39;; 
else p1.style.display=&#39;block&#39;; 
if(p2.style.display==&#39;block&#39;) p2.style.display=&#39;none&#39;; 
else p2.style.display=&#39;block&#39;; 
} 
function showAndHidden2(){ 
var p3=document.getElementById("p3"); 
var p4=document.getElementById("p4"); 
if(p3.style.visibility==&#39;visible&#39;) p3.style.visibility=&#39;hidden&#39;; 
else p3.style.visibility=&#39;visible&#39;; 
if(p4.style.visibility==&#39;visible&#39;) p4.style.visibility=&#39;hidden&#39;; 
else p4.style.visibility=&#39;visible&#39;; 
} 
</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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：HTML5 new form elementsNext article：HTML5 new form elements

See more

Display and hide HTML elements through display or visibility

Related articles