Comment puis-je ajouter ou supprimer des classes d'éléments HTML à l'aide de JavaScript ?

Ajout d'une classe à un élément avec JavaScript

Lorsque vous travaillez avec des éléments HTML, il devient souvent nécessaire d'ajouter ou de supprimer des classes de manière dynamique à l'aide de JavaScript . Par exemple, supposons que vous ayez un élément avec le HTML suivant :

<div class="someclass">
    <img  ... alt="Comment puis-je ajouter ou supprimer des classes d'éléments HTML à l'aide de JavaScript ?" ><p>Et vous souhaitez créer une fonction JavaScript qui ajoutera une autre classe à l'élément div ci-dessus.</p>
<p><strong> Navigateurs modernes</strong></p>
<p>Si vous ciblez uniquement les navigateurs modernes prenant en charge la propriété Element.classList, la solution est simple. Utilisez simplement la méthode classList.add() pour ajouter une nouvelle classe à l'élément :</p>
<pre class="brush:php;toolbar:false">element.classList.add("my-class");

Pour supprimer une classe, utilisez la méthode classList.remove() :

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

Internet Explorer 9 et versions antérieures

Pour les navigateurs plus anciens comme Internet Explorer 9 ou versions antérieures, qui ne prennent pas en charge la propriété classList, vous pouvez utiliser la propriété className. Tout d'abord, attribuez un identifiant à l'élément, ce qui facilite sa récupération :

<div>
<p>Ensuite, concaténez le nouveau nom de classe avec celui existant, en vous assurant qu'un espace est ajouté entre eux :</p>
<pre class="brush:php;toolbar:false">var d = document.getElementById("div1");
d.className += " otherclass";

N'oubliez pas d'inclure l'espace avant le nouveau nom de classe pour éviter les conflits avec les classes existantes dans la liste des classes.

En suivant ces approches, vous pouvez ajouter ou supprimer dynamiquement classes à partir de n'importe quel élément HTML utilisant JavaScript, offrant flexibilité et contrôle sur le style de vos pages Web.