Comment ajouter une nouvelle classe à un élément HTML sans écraser les classes existantes ?

Comment ajouter une classe supplémentaire à un élément existant

Objectif :
Améliorer un élément HTML avec une qualification de classe supplémentaire.

Scénario :
Étant donné un élément avec une classe existante, notre objectif est d'ajouter une nouvelle classe sans écraser celle d'origine.

Solution :

Pour les navigateurs modernes

En utilisant la propriété classList, vous pouvez sans effort ajouter une classe à un élément :

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

De même, pour supprimer un class :

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

Pour la prise en charge héritée

Pour répondre aux navigateurs plus anciens comme Internet Explorer 9, modifiez la propriété className de l'élément en ajoutant un espace suivi du nouveau nom de classe. Comme condition préalable, attribuez un identifiant à l'élément pour un accès pratique :

<div>

Ensuite, utilisez JavaScript :

var d = document.getElementById("div1");
d.className += " otherclass";

N'oubliez pas d'inclure un espace de début avant "otherclass" pour préserver l'existant qualificatifs de classe.

Considérations supplémentaires

Référez-vous au Mozilla Developer Network (MDN) pour obtenir des informations complètes. documentation sur element.className.

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!