Afficher et masquer les éléments HTML via l'affichage ou la visibilité-tutoriel HTML-php.cn

Afficher et masquer les éléments HTML via l'affichage ou la visibilité

不言

Libérer： 2018-05-08 14:45:00

original

2132 Les gens l'ont consulté

Cet article présente principalement l'affichage et le masquage des éléments HTML via l'affichage ou la visibilité. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Si vous avez besoin de l'utiliser. Certaines conditions sont utilisées pour contrôler l'affichage ou le masquage des éléments HTML dans les pages Web. Cela peut être réalisé via l'affichage ou la visibilité. Les amis intéressés peuvent en apprendre davantage sur cet article

Parfois, nous devons contrôler les éléments HTML dans le Web. pages basées sur certaines conditions. L'affichage ou le masquage d'éléments HTML peut être obtenu via l'affichage ou la visibilité. Comprenez la différence entre affichage et visibilité à travers l'exemple suivant. L'exemple de code simple est le suivant :

Copiez le code

. Le code est le suivant :

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

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!