Astuce rapide: ajouter ou supprimer une classe CSS avec JavaScript à la vanille

Utilisez JavaScript pour ajouter et supprimer dynamiquement les classes CSS pour manipuler facilement les éléments Web! Cet article expliquera comment utiliser les attributs className et classList de JavaScript pour gérer efficacement les classes CSS et réaliser une modification dynamique des éléments de la page Web, tels que l'affichage / la masculine, la mise en évidence des erreurs de formulaire ou des animations d'élément.

Points de base:

• JavaScript peut être utilisé pour modifier dynamiquement les éléments de page en fonction des interactions utilisateur (telles que l'affichage / masquer les menus, la mise en évidence des erreurs de formulaire ou des effets d'animation).
• className et classList Les propriétés sont des outils puissants pour faire fonctionner les classes CSS; className classList peut créer des fonctions et ajouter ou supprimer des classes aux éléments à l'aide d'attributs
ou
• . Ces fonctions peuvent prendre un sélecteur de chaîne ou un élément lui-même sous forme de paramètres, faire une boucle à travers l'élément et ajouter ou supprimer la classe spécifiée. className L'attribut classList
(pris en charge par les navigateurs dans IE10 et ci-dessus) fournit une série de méthodes pour exploiter des classes, y compris
• , classList et add, simplifiant le processus d'ajout ou de supprimer des classes. remove toggle

Schéma de compatibilité: utilisez

Propriétés className L'attribut

permet d'accéder à l'attribut de classe de l'élément HTML. Grâce aux opérations de chaîne, nous pouvons ajouter et supprimer des classes. Nous utiliserons la méthode

pour sélectionner des éléments HTML (compatibles avec IE8 et au-dessus des navigateurs). className querySelectorAll()

Ajouter une classe:

function addClass(elements, myClass) {
  if (!elements) return;
  if (typeof elements === 'string') elements = document.querySelectorAll(elements);
  else if (elements.tagName) elements = [elements];
  for (let i = 0; i < elements.length; i++) {
    if (!(' ' + elements[i].className + ' ').includes(' ' + myClass + ' ')) {
      elements[i].className += ' ' + myClass;
    }
  }
}

supprimer la classe:

function removeClass(elements, myClass) {
  if (!elements) return;
  if (typeof elements === 'string') elements = document.querySelectorAll(elements);
  else if (elements.tagName) elements = [elements];
  const reg = new RegExp('(^| )' + myClass + '($| )', 'g');
  for (let i = 0; i < elements.length; i++) {
    elements[i].className = elements[i].className.replace(reg, ' ');
  }
}

Solution de modernisation: utilisez

Propriétés classList IE10 et au-dessus des navigateurs prennent en charge les attributs

, simplifiant le fonctionnement des classes.

classList

Ajouter une classe:

function addClass(selector, myClass) {
  const elements = document.querySelectorAll(selector);
  elements.forEach(element => element.classList.add(myClass));
}

supprimer la classe:

function removeClass(selector, myClass) {
  const elements = document.querySelectorAll(selector);
  elements.forEach(element => element.classList.remove(myClass));
}

Résumé

Cet article présente des méthodes pour ajouter et supprimer les classes CSS à l'aide de propriétés

et

. En maîtrisant ces compétences, vous pouvez facilement réaliser des effets dynamiques des éléments Web et améliorer l'expérience utilisateur. className classList

FAQS (FAQ)

• Objectif d'ajouter ou de supprimer les classes CSS à l'aide de Vanilla JS?

  contrôle dynamiquement l'apparence et le comportement des éléments HTML, tels que la modification des styles en réponse aux opérations utilisateur, afficher / cacher des éléments, créer des effets d'animation, etc.

• Comment ajouter plusieurs classes en utilisant

  ? passez le nom de classe en tant que paramètre indépendant: classList.add() element.classList.add("class1", "class2", "class3");

• Pouvez-vous supprimer des classes qui n'existent pas sur l'élément?

  Oui, ne rapportera pas d'erreur, mais n'effectuera aucune opération.

• Comment vérifier si un élément contient une classe spécifique? Utilisez la méthode classList.contains() pour renvoyer une valeur booléenne.

• Comment manipuler des classes avec plusieurs éléments en même temps? Utilisez querySelectorAll() pour sélectionner des éléments, puis encourez et manipulez les classes de chaque élément.

• Comment changer la classe d'un élément? Utiliser la méthode classList.toggle().

• La différence entre

  className et classList? className est un attribut de chaîne; classList est un attribut en lecture seule qui renvoie l'objet DOMTokenList, fournissant une méthode de fonctionnement de classe plus pratique.

• classList Les éléments SVG sont-ils pris en charge? Prise en charge.

• Comment est la compatibilité du navigateur de

  classList? Les navigateurs modernes sont largement pris en charge, et IE9 et ci-dessous ne sont pas pris en charge.

• La méthode classList peut-elle être appelée dans une chaîne? Oui.

J'espère que cet article vous sera utile!

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!