Comment ajouter une classe à un élément donné ?

J'ai un élément qui a déjà une classe :

<div class="someclass">
    <img ... id="image1&quot ; name="image1&quot ; />
</div>

Maintenant, je veux créer une fonction JavaScript qui ajoutera une classe à la div (pas remplacer, mais ajouter).

Comment puis-je le faire ?

Edwin Pratt
Question modifiée 9 mai 2019 в 10:31
Programmation
javascript dom-manipulation
3 février 2009 в 1:54
27 vues
Solution

Ajoutez un espace et le nom de votre nouvelle classe à la propriété className de l'élément. D'abord, mettez un id sur l'élément pour pouvoir facilement obtenir une référence.

<div id="div1" class="someclass">

</div>

Puis

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

Notez l'espace avant otherclass. Il est important d'inclure cet espace, sinon cela compromet les classes existantes qui le précèdent dans la liste des classes.

Voir aussi [element.className sur MDN] (https://developer.mozilla.org/en-US/docs/Web/API/Element/className).

Sean Ker
Réponse modifiée 4 octobre 2019 в 9:27
Commentaires (14)

trouvez votre élément cible "d" comme vous le souhaitez et ensuite :

d.className += ' additionalClass'; //note the space

vous pouvez envelopper cela dans des moyens plus intelligents pour vérifier la préexistence, et vérifier l'espace requis, etc.

Cœur
Réponse modifiée 26 février 2017 в 4:29
Commentaires (4)

En supposant que vous fassiez plus que simplement ajouter cette classe (par exemple, vous avez des requêtes asynchrones, etc.), je recommanderais une bibliothèque comme [Prototype][1] ou [jQuery][2].

Cela rendra très simple tout ce que vous aurez à faire (y compris ceci).

Disons que vous avez installé jQuery sur votre page. Vous pouvez utiliser un code comme celui-ci pour ajouter un nom de classe à un élément (au chargement, dans ce cas) :

$(document).ready( function() {
  $('#div1').addClass( 'some_other_class' );
} );

Consultez le [navigateur API jQuery][3] pour d'autres fonctionnalités.

[1] : http://www.prototypejs.org/ [2] : http://jquery.com [3] : http://api.jquery.com/

Commentaires (0)