Comment masquer les éléments div en HTML-tutoriel HTML-php.cn

Comment masquer les éléments div en HTML

青灯夜游

Libérer： 2023-01-05 16:13:16

original

37412 Les gens l'ont consulté

Comment masquer les éléments div en HTML : 1. Utilisez l'attribut caché dans la balise div et ajoutez l'instruction "hidden="hidden"". 2. Utilisez l'attribut style dans la balise div et ajoutez le style "display: none;".

Comment masquer les éléments div en HTML

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

Méthode 1 : utilisez l'attribut caché

l'attribut caché HTML spécifie pour masquer l'élément.

Si cet attribut est utilisé, l'élément sera masqué ; les éléments masqués ne seront pas affichés.

Vous pouvez définir l'attribut masqué afin que les utilisateurs ne puissent voir un élément que lorsque certaines conditions sont remplies (comme cocher une case, etc.). Vous pouvez ensuite utiliser JavaScript pour supprimer l'attribut masqué, rendant ainsi l'élément visible.

Exemple :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<div hidden="hidden">这是一段隐藏的段落。</div>
		<div>这是一段可见的段落。</div>
	</body>
</html>

Copier après la connexion

Rendu :

Comment masquer les éléments div en HTML

Méthode 2 : Utiliser l'affichage : aucun style

L'attribut display spécifie le type de boîte que l'élément doit générer. Paramètres :

display: none; Objet caché
display: block;En plus de la conversion en éléments de niveau bloc, cela signifie également afficher des éléments

Remarque :

L'utilisation de display: none; peut masquer des éléments sans occuper d'espace, donc la modification dynamique de cet attribut entraînera une redistribution (modification de la mise en page), cela peut être compris comme la suppression de l'élément de la page ; il ne sera pas hérité par les descendants, mais ses descendants ne seront pas affichés après tout, ils sont tous cachés ensemble.

Exemple :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<div style="display: none;">这是一段隐藏的段落。</div>
		<div>这是一段可见的段落。</div>
	</body>
</html>

Copier après la connexion

Rendu :

Comment masquer les éléments div en HTML