web-dev-qa-db-fra.com

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 (pas remplacer, mais ajouter).

Comment puis je faire ça?

javascriptdom-manipulation
1071
Blankman

Ajoutez un espace ainsi que le nom de votre nouvelle classe à la propriété className de l'élément. Commencez par placer un id sur l’élément afin d’obtenir facilement une référence.

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

Ensuite

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

Voir aussi element.className on MDN .

1771
Ishmael

Le moyen le plus simple de le faire sans aucun framework est d’utiliser la méthode element.classList.add .

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

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

element.classList.remove("otherclass");

Je préfère ne pas avoir à ajouter d'espaces vides et à traiter les entrées en double moi-même (ce qui est requis lorsque vous utilisez l'approche document.className). Il y a quelques limitations du navigateur , mais vous pouvez les contourner en utilisant polyfills .

1268
Yuri

trouvez votre élément cible "d" comme vous le souhaitez, puis:

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

vous pouvez encapsuler cela de manière plus astucieuse pour vérifier la préexistence et vérifier les exigences d'espace, etc.

173
annakata

Ajouter une classe

  • Compatibilité croisée

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

    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 préoccupé par les performances que la compatibilité croisée, vous pouvez le réduire à la suivante, qui est 4% plus rapide.

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

  • Commodité

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

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

Retrait de la classe

  • Performance

    Utiliser sélectivement jQuery est la meilleure méthode pour supprimer une classe si vous êtes soucieux de performances.

    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;

Références

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

Utiliser un 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")
130
davidcondrey

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

Pour ajouter une classe:

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

Pour supprimer la classe:

document.getElementById("div1").classList.remove("classToBeRemoved");
33
Shoaib Chikate

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;
}
21
meouw

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 telle que Prototype ou jQuery .

Cela rendra à peu près tout ce que vous devrez faire (y compris cela) très simple.

Supposons donc que jQuery soit présent sur votre page. Vous pouvez utiliser un code comme celui-ci pour ajouter un nom de classe à un élément (en charge, dans ce cas):

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

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

18
rfunduk

Vous pouvez utiliser la méthode classList.add OR classList.remove pour ajouter/supprimer une classe à 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")
13
sjv

Pour ajouter une classe supplémentaire à un élément:

Pour ajouter une classe à un élément, sans supprimer/affecter les valeurs existantes, ajoutez un espace et le nouveau nom de classe, comme suit:

document.getElementById("MyElement").className += " MyClass";

Pour changer toutes les classes d'un élément:

Pour remplacer toutes les classes existantes par une ou plusieurs nouvelles classes, définissez l'attribut className:

document.getElementById("MyElement").className = "MyClass";

(Vous pouvez utiliser une liste délimitée par des espaces pour appliquer plusieurs classes.)

9
Mo.

Si vous ne souhaitez pas utiliser jQuery et prendre en charge les navigateurs plus anciens:

function addClass(elem, clazz) {
    if (!elemHasClass(elem, clazz)) {
        elem.className += " " + clazz;
    }
}

function elemHasClass(elem, clazz) {
    return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
}
5
Ferran Maylinch

Je sais que IE9 est officiellement arrêté et que nous pouvons y parvenir avec element.classList comme indiqué ci-dessus, mais j'ai simplement essayé d'apprendre comment cela fonctionne sans classList avec l'aide de nombreuses réponses ci-dessus, je pouvais l'apprendre.

Le code ci-dessous étend de nombreuses réponses ci-dessus et les améliore en évitant d'ajouter des classes en double.

function addClass(element,className){
  var classArray = className.split(' ');
  classArray.forEach(function (className) {
    if(!hasClass(element,className)){
      element.className += " "+className;
    }
  });            
}
//this will add 5 only once
addClass(document.querySelector('#getbyid'),'3 4 5 5 5');
4
Yuvaraj

Moi aussi, je pense que le moyen le plus rapide est d’utiliser Element.prototype.classList comme dans es5: document.querySelector(".my.super-class").classList.add('new-class'), mais dans ie8, il n’existe pas de Element.prototype.classList, de toute façon vous pouvez le polyfiller avec cet extrait (tombé libre). éditer et améliorer):

if(Element.prototype.classList === void 0){
        function DOMTokenList(classes, self){
                typeof classes == "string" && (classes = classes.split(' '))
                while(this.length){
                        Array.prototype.pop.apply(this);
                }
                Array.prototype.Push.apply(this, classes);
                this.__self__ = this.__self__ || self
        }

        DOMTokenList.prototype.item = function (index){
                return this[index];
        }

        DOMTokenList.prototype.contains = function (myClass){
                for(var i = this.length - 1; i >= 0 ; i--){
                        if(this[i] === myClass){
                                return true;
                        }
                }
                return false
        }

        DOMTokenList.prototype.add = function (newClass){
                if(this.contains(newClass)){
                        return;
                }
                this.__self__.className += (this.__self__.className?" ":"")+newClass;
                DOMTokenList.call(this, this.__self__.className)
        }

        DOMTokenList.prototype.remove = function (oldClass){
                if(!this.contains(newClass)){
                        return;
                }
                this[this.indexOf(oldClass)] = undefined
                this.__self__.className = this.join(' ').replace(/  +/, ' ')
                DOMTokenList.call(this, this.__self__.className)
        }

        DOMTokenList.prototype.toggle = function (aClass){
                this[this.contains(aClass)? 'remove' : 'add'](aClass)
                return this.contains(aClass);
        }

        DOMTokenList.prototype.replace = function (oldClass, newClass){
                this.contains(oldClass) && this.remove(oldClass) && this.add(newClass)
        }

        Object.defineProperty(Element.prototype, 'classList', {
                get: function() {
                        return new DOMTokenList( this.className, this );
                },
                enumerable: false
        })
}
3
asdru

Vous pouvez utiliser une approche moderne similaire à jQuery

Si vous ne devez modifier qu'un élément, le premier que JS trouvera dans DOM, vous pouvez utiliser ceci:

document.querySelector('.someclass').className += " red";
.red {
  color: red;
}
<div class="someclass">
  <p>This method will add class "red" only to first element in DOM</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

N'oubliez pas de laisser un espace avant nom de la classe.

Si vous avez plusieurs classes auxquelles vous souhaitez ajouter une nouvelle classe, vous pouvez l'utiliser comme ceci

document.querySelectorAll('.someclass').forEach(function(element) {
  element.className += " red";
});
.red {
  color: red;
}
<div class="someclass">
  <p>This method will add class "red" to all elements in DOM that have "someclass" class.</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>
3
Vladimir Jovanović

Pour ajouter, supprimer ou vérifier les classes d'éléments de manière simple:

var uclass = {
    exists: function(elem,className){var p = new RegExp('(^| )'+className+'( |$)');return (elem.className && elem.className.match(p));},
    add: function(elem,className){if(uclass.exists(elem,className)){return true;}elem.className += ' '+className;},
    remove: function(elem,className){var c = elem.className;var p = new RegExp('(^| )'+className+'( |$)');c = c.replace(p,' ').replace(/  /g,' ');elem.className = c;}
};

var elem = document.getElementById('someElem');
//Add a class, only if not exists yet.
uclass.add(elem,'someClass');
//Remove class
uclass.remove(elem,'someClass');
3
Marcos Fernandez Ramos

Juste pour préciser ce que d’autres ont dit, plusieurs classes CSS sont combinées dans une seule chaîne, délimitée par des espaces. Ainsi, si vous vouliez le coder en dur, cela ressemblerait simplement à ceci:

<div class="someClass otherClass yetAnotherClass">
      <img ... id="image1" name="image1" />
</div>

De là, vous pouvez facilement dériver le javascript nécessaire pour ajouter une nouvelle classe ... ajoutez simplement un espace suivi de la nouvelle classe à la propriété className de l'élément. Sachant cela, vous pouvez également écrire une fonction pour supprimer une classe ultérieurement si le besoin s'en faisait sentir.

3
Misko

Je pense qu'il est préférable d'utiliser du JavaScript pur, que nous pouvons exécuter sur le DOM du navigateur.

Voici la manière fonctionnelle de l'utiliser. J'ai utilisé ES6, mais n'hésitez pas à utiliser ES5 et l'expression ou la définition de fonction, selon le style choisi par JavaScript.

'use strict'

const oldAdd = (element, className) => {
  let classes = element.className.split(' ')
  if (classes.indexOf(className) < 0) {
    classes.Push(className)
  }
  element.className = classes.join(' ')
}

const oldRemove = (element, className) => {
  let classes = element.className.split(' ')
  const idx = classes.indexOf(className)
  if (idx > -1) {
    classes.splice(idx, 1)
  }
  element.className = classes.join(' ')
}

const addClass = (element, className) => {
  if (element.classList) {
    element.classList.add(className)
  } else {
    oldAdd(element, className)
  }
}

const removeClass = (element, className) => {
  if (element.classList) {
    element.classList.remove(className)
  } else {
    oldRemove(element, className)
  }
}
2
bvmCoder

Échantillon avec du JS pur. Dans le premier exemple, nous obtenons l'identifiant de notre élément et ajoutons, par exemple, 2 cours.

document.addEventListener('DOMContentLoaded', function() {
    document.getElementsById('tabGroup').className = "anyClass1 anyClass2";
})

Dans le deuxième exemple, nous obtenons le nom de classe de l'élément et en ajoutons 1.

document.addEventListener('DOMContentLoaded', function() {
    document.getElementsByClassName('tabGroup')[0].className = "tabGroup ready";
})
1
Vasyl Gutnyk

Pour ceux qui utilisent Lodash et qui souhaitent mettre à jour la chaîne className:

// get element reference
var elem = document.getElementById('myElement');

// add some classes. Eg. 'nav' and 'nav header'
elem.className = _.chain(elem.className).split(/[\s]+/).union(['nav','navHeader']).join(' ').value()

// remove the added classes
elem.className = _.chain(elem.className).split(/[\s]+/).difference(['nav','navHeader']).join(' ').value()
0
S.D.