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

Comment afficher et masquer les divs en javascript

青灯夜游
Libérer: 2021-04-19 11:15:13
original
2831 Les gens l'ont consulté

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>
Copier après la connexion

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";//显示
Copier après la connexion

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";//显示
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal