Comment changer l'affichage CSS avec js

Dans le processus de développement Web, nous devons souvent changer le style via JavaScript. L'un des scénarios couramment utilisés consiste à modifier la visibilité d'un élément. En CSS, vous pouvez utiliser l'attribut display pour contrôler la visibilité d'un élément. En JavaScript, nous pouvons utiliser le DOM pour accéder et modifier le style des éléments afin de contrôler la visibilité des éléments.

1. Attribut d'affichage

L'attribut d'affichage est utilisé pour contrôler la façon dont un élément est affiché dans le document. Sa valeur peut être la suivante :

1. none : L'élément n'est pas rendu, c'est-à-dire qu'il n'est pas affiché dans le document.
2. block : l'élément est rendu comme un élément de niveau bloc, c'est-à-dire qu'il occupera une ligne entière.
3. inline : l'élément est rendu comme un élément en ligne, c'est-à-dire que l'élément n'occupe pas une ligne entière, mais est affiché sur une seule ligne.
4. inline-block : l'élément est rendu comme un élément de niveau bloc en ligne, c'est-à-dire que l'élément sera affiché sur une seule ligne et que la largeur, la hauteur, la bordure et d'autres styles peuvent être définis.
5. table, table-row, table-cell : les éléments sont rendus en tant qu'éléments liés au tableau. table restitue les éléments sous forme de tableaux, table-row restitue les éléments sous forme de lignes de tableau et table-cell rend les éléments sous forme de cellules de tableau.
6. flex, inline-flex : les éléments sont rendus sous forme de conteneurs flexibles, qui peuvent être utilisés pour implémenter une mise en page réactive et d'autres scénarios.

2. JavaScript exploite l'attribut d'affichage

En JavaScript, nous pouvons obtenir et modifier l'attribut d'affichage d'un élément via le DOM. Tout d’abord, nous devons obtenir l’élément qui doit être exploité via la méthode getElementById() de l’objet document. Cette méthode doit transmettre l'ID de l'élément qui doit être obtenu, par exemple :

var myDiv = document.getElementById('myDiv');

Le code ci-dessus obtiendra l'élément avec l'ID "myDiv" et l'attribuera à la variable myDiv. Ensuite, nous pouvons accéder aux attributs de style de l'élément via l'attribut style. Par exemple, vous pouvez utiliser le code suivant pour définir l'attribut display d'un élément sur none, afin que l'élément ne soit pas affiché sur la page :

myDiv.style.display = 'none';

Nous pouvons également afficher et masquer des éléments en jugeant l'attribut display de l'élément. Par exemple, le code suivant permet à l'élément d'être affiché en définissant son attribut d'affichage sur block s'il est initialement masqué :

if (myDiv.style.display === 'none') {
  myDiv.style.display = 'block';
}

Si l'élément est initialement affiché, vous pouvez définir son attribut d'affichage sur none pour masquer l'élément :

if (myDiv.style.display !== 'none') {
  myDiv.style.display = 'none';
}

3. Scénarios d'application

1. Masquer et afficher les couches contextuelles

Dans le développement Web, il est souvent nécessaire d'utiliser des couches contextuelles pour afficher plus de contenu ou interagir. La couche contextuelle doit généralement être déclenchée lorsque l'utilisateur clique sur un bouton ou un lien, et fermée lorsque l'utilisateur clique sur le bouton « Fermer ». Pour réaliser cette fonction, nous pouvons utiliser JavaScript pour modifier l'attribut d'affichage de la couche contextuelle. Dans l'état initial du calque contextuel, vous pouvez définir son attribut d'affichage sur aucun, ce qui signifie qu'il ne sera pas affiché sur la page. Lorsque l'utilisateur clique sur le bouton ou le lien qui déclenche la couche contextuelle, l'attribut d'affichage de la couche contextuelle peut être défini sur bloquer pour afficher la couche contextuelle. Lorsque l'utilisateur clique sur le bouton « Fermer » dans le calque contextuel, la propriété d'affichage du calque contextuel peut être définie sur aucun pour fermer le calque contextuel.

2. Implémenter une mise en page réactive

La mise en page réactive fait référence à la taille de l'écran d'affichage de différents appareils, en ajustant la mise en page et le style pour s'adapter aux différentes tailles d'écran d'affichage. Lors de la mise en œuvre d'une mise en page réactive, nous devons généralement ajuster le mode d'affichage et la position de certains éléments en fonction de la taille de l'écran. Parmi eux, l'attribut display peut être utilisé pour contrôler le mode d'affichage des éléments afin d'obtenir une mise en page réactive. Par exemple, dans une barre de navigation typique, on souhaite afficher les éléments de la barre de navigation disposés horizontalement lorsque la largeur de l'écran est inférieure à un certain seuil, et verticalement lorsque la largeur de l'écran est supérieure à ce seuil. Cette mise en page réactive peut être obtenue en modifiant les attributs d'affichage de chaque élément dans la barre de navigation.

3. Contrôler la visibilité des éléments en fonction du comportement de l'utilisateur

Dans certains scénarios, nous souhaitons contrôler la visibilité d'un élément en fonction du comportement de l'utilisateur. Par exemple, lorsque l'utilisateur saisit un mot-clé dans le champ de recherche, nous souhaitons afficher la colonne des résultats de la recherche. À ce stade, vous pouvez surveiller l'événement d'entrée du champ de recherche et, lorsque l'utilisateur saisit un mot-clé, définir l'attribut d'affichage de la colonne des résultats de recherche sur bloquer pour afficher les résultats de la recherche. Si l'utilisateur efface les mots-clés, les résultats de la recherche peuvent être masqués en définissant l'attribut d'affichage de la colonne des résultats de recherche sur aucun.

4. Résumé

En modifiant l'attribut d'affichage d'un élément, nous pouvons contrôler la visibilité de l'élément et mettre en œuvre une variété de scénarios de développement Web. Lors de la mise en œuvre de ces scénarios, nous devons obtenir et modifier les attributs de style des éléments via JavaScript. La maîtrise de cette technologie peut nous aider à mieux accomplir diverses tâches de développement Web.

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!