Réponses:
Utilisez element.classList.add pour ajouter une classe:
element.classList.add("my-class");Et element.classList.remove pour supprimer une classe:
element.classList.remove("my-class");Ajoutez un espace plus le nom de votre nouvelle classe à la classNamepropriété de l'élément. Tout d'abord, mettez un idsur 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";Notez l'espace avant otherclass. Il est important d'inclure l'espace sinon il compromet les classes existantes qui le précèdent dans la liste des classes.
Voir aussi element.className sur MDN .
La façon la 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'espace vide et à dupliquer la gestion des entrées moi-même (ce qui est requis lors de l'utilisation de l' document.classNameapproche). Il existe certaines limitations du navigateur , mais vous pouvez les contourner à l'aide de polyfills .
trouvez votre élément cible "d" comme vous le souhaitez et ensuite:
d.className += ' additionalClass'; //note the spacevous pouvez envelopper cela de manière plus intelligente pour vérifier la préexistence et vérifier les besoins en espace, etc.
splitle nom de classe sur les espaces, supprimez celui que vous ne voulez pas du tableau résultant, puis joinle tableau à nouveau ... ou utilisez element.classList.remove.
Cross Compatible
Dans l'exemple suivant, nous ajoutons un classnameà l' <body>élément. Ceci est compatible IE-8.
var a = document.body;
a.classList ? a.classList.add('classname') : a.className += ' classname';Ceci est un raccourci pour les éléments suivants.
var a = document.body;
if (a.classList) {
a.classList.add('wait');
} else {
a.className += ' wait';
}Performance
Si vous êtes plus soucieux des performances que de la compatibilité croisée, vous pouvez les raccourcir comme suit, ce qui est 4% plus rapide.
var z = document.body;
document.body.classList.add('wait');Commodité
Vous pouvez également utiliser jQuery mais les performances résultantes sont nettement plus lentes. 94% plus lent selon jsPerf
$('body').addClass('wait');Performance
L'utilisation sélective de jQuery est la meilleure méthode pour supprimer une classe si vous êtes préoccupé par les 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;Element("document.body").ClassNames.add("classname")
Element("document.body").ClassNames.remove("classname")
Element("document.body").ClassNames.set("classname")YAHOO.util.Dom.hasClass(document.body,"classname")
YAHOO.util.Dom.addClass(document.body,"classname")
YAHOO.util.Dom.removeClass(document.body,"classname")a.classList ? ...) aura-t-elle une différence de vitesse par rapport à la version normale ( if (a.classList) { ....)?
classList.remove(). Pourquoi ne l'avez-vous pas utilisé? c'est beaucoup plus rapide que jQuery jsperf.com/remove-class-vanilla-vs-jquery
classListpour tout sauf pour supprimer des classes, c'est pourquoi je le demande.
Une autre approche pour ajouter la classe à l'élément à l'aide de JavaScript pur
Pour ajouter de la classe:
document.getElementById("div1").classList.add("classToBeAdded");Pour supprimer une classe:
document.getElementById("div1").classList.remove("classToBeRemoved");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;
}if( cn.indexOf( classname ) != -1 ) { return; } Attention, si vous ajoutez la classe «btn» alors que la classe «btn-info» est déjà là, cela échoue.
element.className.split(" ");pour éviter le problème @AlexandreDieulot signalé ici.
En supposant que vous faites plus que simplement ajouter cette seule classe (par exemple, vous avez des demandes asynchrones et ainsi de suite), je recommanderais une bibliothèque comme Prototype ou jQuery .
Cela rendra à peu près tout ce que vous devrez faire (y compris cela) très simple.
Disons que vous avez jQuery sur votre page maintenant, vous pouvez utiliser du 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 de l'API jQuery pour d'autres choses.
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 ajoutera (et ne remplacera PAS) une classe "anyclass" à nameElem. De même, vous pouvez utiliser la méthode classList.remove () pour supprimer une classe.
nameElem.classList.remove("anyclss")Pour ajouter une classe à un élément, sans supprimer / affecter les valeurs existantes, ajoutez un espace et le nouveau nom de classe, comme ceci:
document.getElementById("MyElement").className += " MyClass";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.)
Si vous ne souhaitez pas utiliser jQuery et souhaitez prendre en charge les anciens navigateurs:
function addClass(elem, clazz) {
if (!elemHasClass(elem, clazz)) {
elem.className += " " + clazz;
}
}
function elemHasClass(elem, clazz) {
return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
}Je sais qu'IE9 est officiellement arrêté et nous pouvons y arriver avec element.classListautant de choses que je l'ai dit ci-dessus, mais j'ai juste essayé d'apprendre comment cela fonctionne sans l' classListaide de nombreuses réponses ci-dessus, je pourrais 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');Je pense aussi 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'y a rien de tel que Element.prototype.classList, de toute façon vous pouvez le polyfill avec cet extrait (n'hésitez pas à le modifier et à l'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
})
}Juste pour développer ce que les 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 ... il suffit d'ajouter 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 fait sentir.
Pour ajouter, supprimer ou vérifier des 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');Vous pouvez utiliser une approche moderne similaire à jQuery
Si vous devez modifier un seul é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 le nom de la classe.
Si vous avez plusieurs classes où 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>Je pense qu'il vaut mieux 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 de fonction ou la définition de fonction, selon ce qui convient à votre StyleGuide 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)
}
}Échantillon avec JS pur. Dans le premier exemple, nous obtenons l'identifiant de notre élément et ajoutons par exemple 2 classes.
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 de plus.
document.addEventListener('DOMContentLoaded', function() {
document.getElementsByClassName('tabGroup')[0].className = "tabGroup ready";
})Pour ceux qui utilisent Lodash et souhaitent mettre à jour la classNamechaîne:
// 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()tout d'abord, donnez un identifiant au div. Ensuite, appelez la fonction appendClass:
<script language="javascript">
function appendClass(elementId, classToAppend){
var oldClass = document.getElementById(elementId).getAttribute("class");
if (oldClass.indexOf(classToAdd) == -1)
{
document.getElementById(elementId).setAttribute("class", classToAppend);
}
}
</script>Vous pouvez utiliser l'API querySelector pour sélectionner votre élément, puis créer une fonction avec l'élément et le nouveau nom de classe comme paramètres. Utilisation de classlist pour les navigateurs modernes, sinon pour IE8. Ensuite, vous pouvez appeler la fonction après un événement.
//select the dom element
var addClassVar = document.querySelector('.someclass');
//define the addclass function
var addClass = function(el,className){
if (el.classList){
el.classList.add(className);
}
else {
el.className += ' ' + className;
}
};
//call the function
addClass(addClassVar, 'newClass');document.getElementById('some_id').className+=' someclassname'OU:
document.getElementById('come_id').classList.add('someclassname')La première approche a aidé à ajouter la classe lorsque la deuxième approche n'a pas fonctionné.
N'oubliez pas de garder un espace devant le' someclassname' dans la première approche.
Pour le retrait, vous pouvez utiliser:
document.getElementById('some_id').classList.remove('someclassname')Ce code js fonctionne pour moi
fournit le remplacement du nom de classe
var DDCdiv = hEle.getElementBy.....
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
for (var i=0; i< Ta.length;i++)
{
if (Ta[i] == 'visible'){
Ta[i] = 'hidden';
break;// quit for loop
}
else if (Ta[i] == 'hidden'){
Ta[i] = 'visible';
break;// quit for loop
}
}
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class namePour ajouter, utilisez simplement
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
Ta.push('New class name');
// Ta.push('Another class name');//etc...
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class namePour supprimer l'utilisation
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
for (var i=0; i< Ta.length;i++)
{
if (Ta[i] == 'visible'){
Ta.splice( i, 1 );
break;// quit for loop
}
}
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class nameJ'espère que cela est utile pour sombody
element.classList.add("my-class")place.