web-dev-qa-db-fra.com

comment ajouter une classe css à un élément en javascript?

Supposons que la variable id d'un élément HTML soit connue, de sorte que l'élément peut être référencé en utilisant

document.getElementById(element_id);

Existe-t-il une fonction Javascript native pouvant être utilisée pour ajouter une classe CSS à cet élément?

javascriptcss
38
omg
var element = document.getElementById(element_id);
element.className += " " + newClassName;

Voilà. Cela fonctionnera sur pratiquement tous les navigateurs. L'espace de début est important, car la propriété className traite les classes css comme une chaîne unique, qui doit correspondre à l'attribut class sur les éléments HTML (où plusieurs classes doivent être séparées par des espaces). 

Incidemment, vous feriez mieux d'utiliser une bibliothèque Javascript comme prototype ou jQuery , qui dispose de méthodes pour le faire, ainsi que de fonctions permettant de vérifier si un élément a déjà une classe. .

En prototype, par exemple:

// Prototype automatically checks that the element doesn't already have the class
$(element_id).addClassName(newClassName);

Tu vois combien c'est beau?!

82
Triptych

classList est une alternative pratique pour accéder à la liste des classes d'un élément .. voir http://developer.mozilla.org/en-US/docs/Web/API/Element.classList .

Non pris en charge dans IE <10

9
user3270791

Lorsqu'un élément a déjà un nom de classe défini, son influence sur l'élément est liée à sa position dans la chaîne des noms de classe. Les classes ultérieures remplacent les précédentes en cas de conflit.

Ajouter une classe à un élément devrait déplacer le nom de la classe à la fin de la liste, s'il existe déjà.

document.addClass= function(el, css){
    var tem, C= el.className.split(/\s+/), A=[];    
    while(C.length){
        tem= C.shift();
        if(tem && tem!= css) A[A.length]= tem;
    }
    A[A.length]= css;
    return el.className= A.join(' ');   
}
3
kennebec

Ajouter une classe en utilisant la propriété classList de l'élément:

element.classList.add('my-class-name');

Enlever:

element.classList.remove('my-class-name');
2
bruddha

Vous devriez pouvoir définir la propriété className de l'élément. Vous pouvez faire un + = pour l'ajouter.

2
Tom Hubbard

vous pouvez utiliser setAttribute.

Exemple: Pour ajouter une classe: 

 document.getElementById('main').setAttribute("class","classOne");

Pour plusieurs classes: 

 document.getElementById('main').setAttribute("class", "classOne classTwo");
0
Deke
addClass=(selector,classes)=>document.querySelector(selector).classList(...classes.split(' '));

Cela va ajouter UNE classe ou plusieurs classes: 

addClass('#myDiv','back-red'); // => Add "back-red" class to <div id="myDiv"/>
addClass('#myDiv','fa fa-car') //=>Add two classes to "div"
0
Abdennour TOUMI