Comment puis-je ajouter une classe à un élément HTML à l'aide de JavaScript ?

Ajout d'une classe à un élément existant

En HTML, nous pouvons attribuer des classes aux éléments pour les styliser et les identifier à l'aide de CSS. Parfois, nous devons ajouter dynamiquement une classe supplémentaire à un élément existant à l’aide de JavaScript. Ce didacticiel couvre deux méthodes pour y parvenir, s'adressant aux navigateurs modernes et existants.

Navigateurs modernes (IE9) :

La propriété classList fournit un moyen simple de manipuler le classes d'un élément. Voici comment ajouter une classe :

element.classList.add("my-class");

Navigateurs hérités (IE8-) :

Pour les navigateurs plus anciens, nous devons manipuler directement la propriété className. Cependant, nous devons examiner attentivement les classes existantes présentes dans l'élément.

Étapes :

1. Attribuez un identifiant à l'élément pour un accès facile en JavaScript.
2. Utilisez le code JavaScript suivant pour ajouter la classe :

var d = document.getElementById("elementID");
d.className += " new-class";

Assurez-vous d'inclure un espace avant le nouveau nom de classe pour éviter d'écraser les classes existantes.

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!