Question 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" 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?


919
2018-02-03 13:54


origine


Réponses:


Ajoutez un espace plus le nom de votre nouvelle classe à className propriété de l'élément. D'abord, mettez un id sur l'élément afin que vous puissiez 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 += " otherclass";

Voir également element.className sur MDN.


1640
2018-02-03 13:58



Le moyen le plus simple de le faire sans aucun cadre est d'utiliser element.classList.add méthode.

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

Modifier: Et si vous voulez supprimer la classe d'un élément -

element.classList.remove("otherclass");

Je préfère ne pas devoir ajouter d'espace vide et dupliquer la gestion des entrées moi-même (ce qui est nécessaire lors de l'utilisation du document.className approche). Il y a quelques limitations du navigateur, mais vous pouvez travailler autour d'eux en utilisant polyfills.


1036
2017-12-31 12:12



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.


171
2018-02-03 14:01



Ajouter une classe

  • Compatible avec Cross

    Dans l'exemple suivant, nous ajoutons un classname au <body> élément. C'est IE-8 compatible.

    var a = document.body;
    a.classList ? a.classList.add('classname') : a.className += ' classname';
    

    Ceci est un raccourci pour ce qui suit ..

    var a = document.body;
    if (a.classList) {
        a.classList.add('wait');
    } else {
        a.className += ' wait';
    }
    

  • Performance

    Si vous êtes plus concerné par les performances par rapport à la compatibilité croisée, vous pouvez le réduire à ce qui suit, soit 4% plus rapide.

    var z = document.body;
    document.body.classList.add('wait');
    

  • Commodité

    Vous pouvez également utiliser jQuery, mais les performances qui en résultent sont nettement plus lentes. 94% plus lent selon jsPerf

    $('body').addClass('wait');
    


Supprimer la classe

  • Performance

    Utiliser jQuery de manière sélective est la meilleure méthode pour supprimer une classe si vous êtes concerné par la performance

    var a = document.body, c = ' classname';
    $(a).removeClass(c);
    

  • Sans jQuery c'est 32% plus lent

    var a = document.body, c = ' classname';
    a.className = a.className.replace( c, '' );
    a.className = a.className + c;
    

Les références

  1. Cas de test jsPerf: Ajout d'une classe
  2. Cas de test jsPerf: suppression d'une classe

Utilisation du prototype

Element("document.body").ClassNames.add("classname")
Element("document.body").ClassNames.remove("classname")
Element("document.body").ClassNames.set("classname")

Utiliser YUI

YAHOO.util.Dom.hasClass(document.body,"classname")
YAHOO.util.Dom.addClass(document.body,"classname")
YAHOO.util.Dom.removeClass(document.body,"classname")

116
2017-12-22 23:29



Une autre approche pour ajouter la classe à l'élément en utilisant du JavaScript pur

Pour l'ajout de classe:

document.getElementById("div1").classList.add("classToBeAdded");

Pour supprimer la classe:

document.getElementById("div1").classList.remove("classToBeRemoved");

32
2017-09-23 11:15



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

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

Supposons que vous ayez jQuery sur votre page maintenant, vous pouvez utiliser un code comme celui-ci pour ajouter un nom de classe à un élément (sur load, dans ce cas):

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

Vérifiez navigateur de l'API jQuery pour d'autres choses.


20
2018-02-03 14:00



Lorsque le travail que je fais ne justifie pas l'utilisation d'une bibliothèque, j'utilise ces deux fonctions:

function addClass( classname, element ) {
    var cn = element.className;
    //test for existance
    if( cn.indexOf( classname ) != -1 ) {
        return;
    }
    //add a space if the element already has class
    if( cn != '' ) {
        classname = ' '+classname;
    }
    element.className = cn+classname;
}

function removeClass( classname, element ) {
    var cn = element.className;
    var rxp = new RegExp( "\\s?\\b"+classname+"\\b", "g" );
    cn = cn.replace( rxp, '' );
    element.className = cn;
}

20
2018-02-03 14:40



Vous pouvez utiliser la méthode classList.add OU classList.remove pour ajouter / supprimer une classe d'un élément.

var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")

Le code ci-dessus va ajouter (et non remplacer) une classe "anyclass" à nameElem. De même, vous pouvez utiliser la méthode classList.remove () pour supprimer une classe.

nameElem.classList.remove("anyclss")

14
2017-08-10 08:59