Comment changer le style de classe d'un élément avec CSS

CSS (Cascading Style Sheets) est une technologie inévitable et importante dans le développement Web. Elle permet aux développeurs de séparer le style des pages Web de la structure de la page, obtenant ainsi un code plus clair et plus facile à maintenir. En CSS, la classe est un sélecteur important qui permet aux développeurs d'attribuer des attributs et des valeurs spécifiques aux éléments pour obtenir des effets de style personnalisés.

Parfois, nous devons modifier dynamiquement la classe d'un élément dans les opérations JavaScript. Par exemple, lorsque l'utilisateur clique sur un bouton, la page doit changer le style en fonction de la saisie de l'utilisateur ou de l'état du système. En CSS, changer la classe d'un élément est très simple, il suffit d'utiliser l'interface element.classList.

L'interface element.classList est une nouvelle API en HTML5. Elle fournit des méthodes pratiques pour faire fonctionner la classe d'éléments, telles que add(), remove() et toggle(), etc., permettant aux développeurs de styliser facilement les éléments Add,. supprimer, modifier et vérifier. Ci-dessous, je présenterai quelques méthodes d'interface classList couramment utilisées et leur utilisation. La méthode

1. add()

add() peut ajouter une nouvelle classe à la classList de l'élément. Si la classe existe déjà dans l'élément, la méthode add() ignorera l'opération. Voici sa syntaxe :

element.classList.add(class1 [, class2 [, ... [, classN]]])

Exemple de code :

const element = document.querySelector('#myDiv');
element.classList.add('myClass');

2. remove()

remove() peut supprimer une classe existante de la classList de l'élément. Si la classe n'existe pas dans l'élément, alors delete () La méthode ignorera cette opération. Voici sa syntaxe :

element.classList.remove(class1 [, class2 [, ... [, classN]]])

Exemple de code :

const element = document.querySelector('#myDiv');
element.classList.remove('myClass');

3. toggle()

La méthode toggle() peut ajouter ou supprimer une classe dans la classList de l'élément, selon que la classe existe déjà sur l'élément. Si l'élément n'a pas la classe, la méthode toggle() l'ajoute à la classList ; si l'élément possède déjà la classe, la méthode toggle() la supprime de la classList. Voici sa syntaxe :

element.classList.toggle(class, true|false)

Parmi eux, lorsque la valeur du deuxième paramètre est vraie, cela signifie forcer l'ajout de la classe ; si la valeur est fausse, cela signifie forcer la suppression de la classe ; Exemple de code : la méthode

const element = document.querySelector('#myDiv');
element.classList.toggle('myClass');

4. contains()

contains() peut vérifier si la classe spécifiée est incluse dans la classeList de l'élément. Si la classe existe, elle renvoie true si elle n'existe pas, elle renvoie false ; . Voici sa syntaxe :

element.classList.contains(class)

Exemple de code :

const element = document.querySelector('#myDiv');
if (element.classList.contains('myClass')) {
  console.log('包含该class');
} else {
  console.log('不包含该class');
}

Résumé :

Dans le processus de développement Web, la modification dynamique de la classe d'éléments est une technologie très importante, qui peut rendre l'effet interactif de la page Web plus riche et plus vif. L'interface element.classList fournit des méthodes pratiques pour exploiter la classe d'éléments, permettant aux développeurs d'ajouter, de supprimer, de modifier et de vérifier facilement les styles. Cet article présente les quatre méthodes d'interface classList couramment utilisées add(), Remove(), toggle() et contain() et comment les utiliser. J'espère que cela sera utile à tout le monde.

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!