Comment contrôler l'affichage et le masquage des divs avec CSS

DIV CSS Show and Hide

DIV est une balise couramment utilisée en HTML, utilisée pour diviser les pages et implémenter la mise en page. Dans les effets interactifs de la page, nous avons parfois besoin d'afficher ou de masquer dynamiquement certains éléments DIV. À l’heure actuelle, nous pouvons utiliser la propriété display du CSS pour contrôler la visibilité du DIV.

1. Attribut d'affichage

L'attribut d'affichage est utilisé pour contrôler le mode d'affichage des éléments HTML. Il peut prendre les valeurs suivantes :

1. none

Lorsqu'il est défini sur none, l'élément sera masqué et ne laissera aucun espace dans la page.

2. block

Lorsqu'il est défini sur block, l'élément sera affiché comme un élément de niveau bloc, c'est-à-dire que l'élément occupe une ligne et que la largeur du conteneur est remplie.

3. inline

Lorsqu'il est défini sur inline, l'élément sera affiché comme un élément en ligne, c'est-à-dire que plusieurs éléments peuvent être affichés sur la même ligne.

4. inline-block

Lorsqu'ils sont définis sur inline-block, les éléments seront affichés sous forme d'éléments de niveau bloc en ligne, c'est-à-dire que plusieurs éléments peuvent être affichés sur la même ligne et qu'il y a un certain espacement entre les éléments.

5. table

Lorsqu'il est défini sur table, l'élément sera affiché sous forme de tableau et la disposition de l'élément peut être contrôlée à l'aide des propriétés CSS liées au tableau.

Les valeurs ci-dessus peuvent être utilisées dans l'attribut display de l'élément DIV.

2. Syntaxe de base

En définissant l'attribut display, nous pouvons afficher ou masquer l'élément DIV. Voici la syntaxe de base :

//显示元素
document.getElementById('example').style.display = 'block';

//隐藏元素
document.getElementById('example').style.display = 'none';

Dans le code ci-dessus, nous obtenons l'élément DIV avec l'identifiant de l'exemple via getElementById, puis contrôlons l'affichage ou le masquage de l'élément en définissant l'attribut style.display.

3. Exemple de démonstration

Ci-dessous, nous utiliserons un exemple de démonstration pour illustrer comment utiliser la propriété display de CSS pour contrôler l'affichage ou le masquage d'éléments.

1. Masquer l'élément DIV

Ce qui suit est un élément DIV :

<div id="example">Hi,我是DIV元素！</div>

Nous pouvons utiliser le code suivant pour masquer cet élément :

document.getElementById('example').style.display = 'none';

Dans cet exemple, nous obtenons l'élément DIV avec l'exemple d'identifiant, puis ajoutons son L'attribut display est défini sur none, masquant ainsi l'élément.

2. Afficher l'élément DIV

Si nous souhaitons afficher un élément DIV qui était auparavant masqué, nous pouvons utiliser le code suivant :

document.getElementById('example').style.display = 'block';

De cette façon, l'élément DIV précédemment masqué peut être réaffiché.

3. Modifier le mode d'affichage des éléments DIV

Lors de l'explication de l'attribut d'affichage plus tôt, nous avons mentionné que vous pouvez définir le mode d'affichage des éléments au niveau du bloc, en ligne, au niveau du bloc en ligne et d'autres éléments. Nous pouvons également modifier l'affichage des éléments DIV de cette manière.

Par exemple, nous pouvons utiliser le code suivant pour modifier un élément DIV en élément en ligne :

document.getElementById('example').style.display = 'inline';

De cette façon, l'élément DIV qui occupait à l'origine une ligne entière sera disposé en ligne comme du texte.

4. Résumé

Dans les effets d'interaction de page, nous avons souvent besoin de contrôler dynamiquement l'affichage ou le masquage d'éléments. Cette fonction peut être facilement réalisée en utilisant la propriété d'affichage CSS. Grâce à une syntaxe simple, nous pouvons contrôler si l'élément DIV existe réellement ou non et modifier la façon dont il est affiché. Notez que la modification de la propriété display affectera également la façon dont les descendants de l'élément sont affichés.

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!