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:121250parcourir
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=='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>
Pour plus d'articles liés à l'affichage ou à la visibilité pour masquer les éléments html, veuillez faire attention au site PHP chinois !