Comment afficher et masquer des éléments HTML via l'affichage ou la visibilité-tutoriel HTML-php.cn

Comment afficher et masquer des éléments HTML via l'affichage ou la visibilité

php中世界最好的语言

Libérer： 2018-02-08 09:46:59

original

3614 Les gens l'ont consulté

Cette fois, je vais vous montrer comment afficher et masquer les éléments HTML via l'affichage ou la visibilité, et comment afficher et masquer les éléments HTML via l'affichage ou visibilité. Quelles sont les précautions pour afficher et masquer Ce qui suit est un cas pratique, jetons-y un œil.

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 l'affichage et la visibilité à travers les exemples suivants. L'exemple de code simple est le suivant :

<html> 
<head> 
<title>HTML元素的显示与隐藏控制</title> 
<script type="text/javascript"> 
function showAndHidden1(){ 
var div1=document.getElementById("div1"); 
var div2=document.getElementById("div2"); 
if(div1.style.display==&#39;block&#39;) div1.style.display=&#39;none&#39;; 
else div1.style.display=&#39;block&#39;; 
if(div2.style.display==&#39;block&#39;) div2.style.display=&#39;none&#39;; 
else div2.style.display=&#39;block&#39;; 
} 
function showAndHidden2(){ 
var div3=document.getElementById("div3"); 
var div4=document.getElementById("div4"); 
if(div3.style.visibility==&#39;visible&#39;) div3.style.visibility=&#39;hidden&#39;; 
else div3.style.visibility=&#39;visible&#39;; 
if(div4.style.visibility==&#39;visible&#39;) div4.style.visibility=&#39;hidden&#39;; 
else div4.style.visibility=&#39;visible&#39;; 
} 
</script> 
</head> 
<body> 
<div>display：元素的位置不被占用</div> 
<div id="div1" style="display:block;">DIV 1</div> 
<div id="div2" style="display:none;">DIV 2</div> 
<input type="button" onclick="showAndHidden1();" value="DIV切换" /> 
<hr> 
<div>visibility：元素的位置仍被占用</div> 
<div id="div3" style="visibility:visible;">DIV 3</div> 
<div id="div4" style="visibility:hidden;">DIV 4</div> 
<input type="button" onclick="showAndHidden2();" value="DIV切换" /> 
</body> 
</html>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu ces cas. Pour des informations plus intéressantes, veuillez. faites attention aux autres sujets connexes dans l'article du site Web PHP chinois !

Lecture connexe :

Il n'est pas valide de définir plusieurs attributs de classe en HTML

Comment télécharger des fichiers de manière asynchrone en HTML

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!