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

Question

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

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

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

Comment puis je faire ça?

Answer 1

Ajoutez un espace plus le nom de votre nouvelle classe à la propriété className de l'élément. Tout d'abord, placez un id sur l'élément afin de pouvoir facilement obtenir une référence.

 <div id="div1" class="someclass">
    <img ... id="image1" name="image1" />
</div>
 

alors

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

Answer 2

La façon la plus simple de le faire sans aucun cadre est d'utiliser l'élément.classList.ajouter de la méthode.

var element = document.getElementById("div1");
element.classList.add("otherclass");

Je préfère ne pas avoir à ajouter de n'importe quel espace vide et l'entrée en double manipulation de moi-même (ce qui est nécessaire lors de l'utilisation de l' document.className ). Il y a quelques restrictions du navigateur, mais vous pouvez travailler autour d'eux à l'aide de polyfills.

Answer 3

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

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

vous pouvez envelopper de manière plus intelligente pour vérifier la pré-existence, et vérifier les exigences d'espace etc.

Answer 4

Lorsque le travail que je fais ne justifie à l’aide d’une bibliothèque, utiliser ces deux fonctions :

Answer 5

En supposant que vous êtes en train de faire plus que de simplement ajouter cette classe (par exemple, vous avez des requêtes asynchrones et ainsi de suite aller sur ainsi), je vous recommande une bibliothèque comme Prototype ou jQuery.

Cela va faire juste au sujet de tout ce que vous aurez besoin de le faire (y compris celle -) c'est très simple.

Donc, disons que vous avez jQuery sur votre page, vous pouvez utiliser ce code pour ajouter un nom de classe à un élément (sur la charge, dans ce cas):

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

Découvrez le jQuery API du navigateur pour d'autres trucs.