Changer la classe d'un élément HTML avec JavaScript

1. Sélectionnez un élément HTML dans JavaScript
2. Modifier toutes les classes applicables à un élément dans JavaScript
3. Insérer une classe supplémentaire dans l’élément en JavaScript
4. Supprimer une classe dans un élément en JavaScript
5. Vérifier si une classe a été utilisée dans un élément en JavaScript

Cet article montre comment modifier la classe d’un élément HTML en réponse à des événements JavaScript.

Sélectionnez un élément HTML dans JavaScript

Incontestablement, le moyen le plus simple de sélectionner un élément HTML en JavaScript est d’utiliser le document.getElementById().

Par exemple, si vous devez sélectionner un élément avec l’ID de classe Etudiants, voici comment le sélectionner.

document.getElementById('Students')

Modifier toutes les classes applicables à un élément dans JavaScript

Après avoir sélectionné l’élément à l’aide de son ID de classe, vous pouvez modifier sa classe ou remplacer toutes ses classes, comme indiqué ci-dessus. Vous devrez en définir une nouvelle en utilisant l’attribut .className pour remplacer l’ancienne classe, comme illustré ci-dessous.

Document.getElementById('Fruits').classname = 'Veggies';

Insérer une classe supplémentaire dans l’élément en JavaScript

Vous pouvez également ajouter une nouvelle classe à un élément sans modifier aucune des classes existantes. Vous pouvez le faire en utilisant l’opérateur += pour ajouter la nouvelle classe.

Par example,

Document.getElementById('Subjects').className += 'Physics';

Il ajoute une classe supplémentaire nommée Physique aux autres classes de l’élément Subjects.

Supprimer une classe dans un élément en JavaScript

La suppression d’une seule classe dans un élément sans affecter les autres classes est légèrement plus complexe. Vous devrez utiliser le .className.replace avec l’expression régulière suivante.

?:^|\s)RemoveThis(?!\S)/g

• ?:^|\s capture le début d’une chaîne et / ou de tout caractère d’espacement utilisé.
• RemoveThis est le nom de la classe à supprimer.
• (?!\S) vérifie que RemoveThis est un nom de classe complet et recherche tous les caractères non-espace à la fin. En d’autres termes, cela garantit que l’expression régulière est placée à la fin de la chaîne.
• g est le drapeau qui garantit que la commande de remplacement est effectuée si nécessaire dans tous les cas où la classe a été ajoutée.

Voir l’exemple ci-dessous.

document.getElementById('ElementOne').className =
    document.getElementById('ElementOne')
        .className.replace(/(?:^|\s)RemoveThis(?!\S)/g, '')

Vérifier si une classe a été utilisée dans un élément en JavaScript

Pour vérifier si une classe a été appliquée à un élément spécifique, vous pouvez utiliser l’expression régulière ci-dessus. Ceci est mieux réalisé en utilisant un if(); déclaration pour donner un résultat. Par exemple:

if (document.getElementById('ElementOne')
        .className.match(/(?:^|\s)ClassOne(?!\S)/))
print('Class has been used.')

La sortie sera La classe a été utilisée si la vérification est positive, ou aucune sortie si elle est négative à moins qu’une action ou une sortie alternative ne soit définie avec l’instruction else.

Il n’est pas recommandé d’écrire du code JavaScript directement dans les attributs d’événement HTML. Cela pourrait rendre plus difficile l’exécution et le ralentissement des applications. Au lieu de cela, vous pouvez écrire le JavaScript dans une fonction, en appelant ladite fonction dans un attribut onclick puis en déplaçant l’événement du code HTML vers JavaScript. Vous pouvez y parvenir avec l’attribut .addEventListener().