Maison  >  Article  >  interface Web  >  affichage ou visibilité pour masquer les éléments html

affichage ou visibilité pour masquer les éléments html

高洛峰
高洛峰original
2017-03-02 14:46:121254parcourir

Contrôlez l'affichage ou le masquage des éléments HTML dans les pages Web en fonction de certaines conditions. Ceci peut être réalisé via l'affichage ou la visibilité. Voici un exemple simple pour votre référence. Parfois, nous devons contrôler si les éléments HTML de la page Web sont affichés ou masqués en fonction de certaines conditions, qui peuvent être obtenues 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 :

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>


Pour plus d'articles liés à l'affichage ou à la visibilité pour masquer les éléments html, veuillez faire attention au site PHP chinois !


Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn