Maison  >  Article  >  interface Web  >  Comment afficher et masquer les divs en javascript

Comment afficher et masquer les divs en javascript

青灯夜游
青灯夜游original
2021-04-19 11:15:132776parcourir

Méthode : 1. Utilisez l'attribut display, la syntaxe "div object.style.display="none|block"" ; 2. Utilisez l'attribut de visibilité, la syntaxe "div object.style.visibility=" caché|visible" ".

Comment afficher et masquer les divs en javascript

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

<div id="demo">AAA</div>

Il existe deux façons de masquer et d'afficher les divs dans JS :

Méthode 1 : libérer l'espace de la page occupé après le masquage

En définissant l'attribut display, le div peut être masqué pour libérer l'espace de page occupé.

style="display: none;"

document.getElementById("demo").style.display="none";//隐藏
document.getElementById("demo").style.display="block";//显示

Méthode 2 : Toujours occupant la page après avoir masqué l'espace, afficher le blanc

La visibilité du div peut contrôler l'affichage et le masquage du div, mais la page apparaîtra vide après le masquage.

style="visibility: none;"

document.getElementById("demo").style.visibility="hidden";//隐藏
document.getElementById("demo").style.visibility="visible";//显示

Remarque :

L'utilisation de la deuxième méthode est plus conviviale. Cependant, utiliser div.style.display="none" pour masquer entraînera la mise en veille des éléments à l'intérieur du div et les événements à l'intérieur ne le seront pas. répondre.

[Apprentissage recommandé : Tutoriel JavaScript avancé]

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!

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