1190

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 ajoutera une classe à div(pas remplacer, mais ajouter).

Comment puis je faire ça?

javascript css dom-manipulation Blankman
la source

9

Pour tous ceux qui liront ce fil en 2020 ou plus tard, ignorez l'ancienne méthode className et utilisez-la à la element.classList.add("my-class")place.

Pikamander2

1922

Si vous ne ciblez que les navigateurs modernes:

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");

Si vous devez prendre en charge Internet Explorer 9 ou une version antérieure:

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 .

Ismaël
la source

26

Si le seul travail sur toute la page qui doit être fait avec JavaScript est cet ajout de nom de classe, alors oui. Mais je ne vois pas que ce soit la seule partie dynamique de la page. Une bibliothèque vous aidera également pour tout le reste. À 30-50kb, jQuery n'est guère un succès à discuter.

rfunduk

167

"Une bibliothèque vous aidera également" - à part l'apprentissage de JavaScript

meouw

19

Qu'est-ce que l'ajout d'une classe à un élément DOM a à voir avec l'apprentissage de la langue? document.getElementById ('div1'). className est autant un problème lié à la bibliothèque que l'utilisation de jQuery pour faire de même. La question était "comment puis-je faire cela", une bibliothèque soigneusement testée est la réponse sensée.

rfunduk le

6

@thenduks: Je suis sûr que vous savez que JavaScript! == jQuery. C'est une bonne chose que les réponses à cette question incluent des solutions de bibliothèque et non de bibliothèque car il est important de savoir comment les choses fonctionnent et pas seulement la manière la plus simple de les accomplir. Vous remarquerez que cette question est marquée javascript

meouw

2

@meouw: Je suis d'accord avec toi. jQuery est écrit en JavaScript, cependant, donc je maintiens que mentionner à l'OP qu'une bibliothèque est une bonne idée n'est pas «pousser un framework dans sa gorge». C'est tout.

rfunduk

1352

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 .

Yuri
la source

67

C'est dommage que cela ne soit pas pris en charge avant IE 10.0 car c'est une excellente fonctionnalité et la solution la plus simple à un problème que je rencontre souvent.

mricci

12

Un polyfill pour classList est disponible.

wcandillon

10

docs element.classList sur MDN.

willlma

11

Celui-ci semble être le meilleur à utiliser, car ceux qui ont de l'espace se sentent au moins comme des hacks - pas pour l'ajout de classes ...

Silver Ringvee

5

@SilverRingvee Un autre risque de l'approche spatiale est que certains autres développeurs pourraient ne pas savoir que c'est vital, et le supprimer afin de nettoyer les choses.

akauppi

178

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

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

vous pouvez envelopper cela de manière plus intelligente pour vérifier la préexistence et vérifier les besoins en espace, etc.

annakata
la source

Et pour supprimer en utilisant cette méthode?

DeathGrip

3

@DeathGrip redéfinit simplement la classe sur un seul nom défini d.className = 'originalClass';

TheTechy

@TheTechy - si vous avez plus d'une classe que vous devez garder (ce qui arrive souvent ces jours-ci), cela ne fonctionnera pas.

Mark Schultheiss

1

Pour supprimer la méthode à l'ancienne, 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.

Stijn de Witt

131

Ajouter une classe

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');
```

Supprimer la classe

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;

Références

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")

davidcondrey
la source

Wow merci :) La version raccourcie ( a.classList ? ...) aura-t-elle une différence de vitesse par rapport à la version normale ( if (a.classList) { ....)?

Wilf

5

Il y a olso classList.remove(). Pourquoi ne l'avez-vous pas utilisé? c'est beaucoup plus rapide que jQuery jsperf.com/remove-class-vanilla-vs-jquery

Fez Vrasta

@FezVrasta classList n'est pas pris en charge avant IE 10, qui a toujours une part de marché décente (+ 13% sur netmarketshare.com).

Adam

6

@Adam, il a utilisé classListpour tout sauf pour supprimer des classes, c'est pourquoi je le demande.

Fez Vrasta

@FezVrasta Sous compatibilité croisée, j'ai utilisé .add () mais seulement après avoir vérifié s'il est disponible, compatible avec Hense . Pour supprimer je n'ai pas pris la peine de me répéter donc je n'ai pas inclus autant d'options.

davidcondrey

33

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");

Shoaib Chikate
la source

4

Cela a déjà été répondu plusieurs fois par d'autres utilisateurs, y compris des discussions sur la prise en charge du navigateur et les shims.

bafromca

@bafromca Je n'ai pas vu que la réponse précédente a été donnée et c'est mon erreur. Vous pouvez

signaler

3

@ShoaibChikate: vous pouvez également supprimer la réponse si vous le souhaitez (vous garderez les points). J'essaie simplement de réduire l'encombrement sur cette question; dépend entièrement de vous.

Dan Dascalescu

22

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

meouw
la source

15

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.

Alexandre Dieulot

1

vous devez utiliser element.className.split(" ");pour éviter le problème @AlexandreDieulot signalé ici.

Amir Fo

20

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.

rfunduk
la source

15

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")

sjv
la source

très agréable, mais non pris en charge dans IE <= 9 ou Safari <= 5.0 ... :( ( caniuse.com/classlist )

simon

1

Cela a déjà été discuté , y compris la prise en charge du navigateur.

Dan Dascalescu

10

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 ceci:

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

Pour modifier 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.)

Mo.
la source

6

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);
}

Ferran Maylinch
la source

5

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');

Yuvaraj
la source

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
	})
}

Développer l'extrait

asdru
la source

4

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.

Misko
la source

4

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');

Marcos Fernandez Ramos
la source

4

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>

Développer l'extrait

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>

Développer l'extrait

Vladimir Jovanović
la source

3

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)
  }
}

Développer l'extrait

bvmCoder
la source

2

É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";
})

Vasyl Gutnyk
la source

1

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()

Dakota du Sud
la source

0

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>

tehvan
la source

1

il remplacera la classe non ajoutée! Peut-être qu'il manque une ligne ou un oldClass + "" + classToAppend au lieu du dernier classToAppend

Vinze

indexOfest une solution naïve et a déjà un problème signalé .

Dan Dascalescu

0

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');

KevinOrfas
la source

Cela a déjà été discuté , ainsi que la prise en charge du navigateur.

Dan Dascalescu

0

Le plus court

image1.parentNode.className+=' box';

Afficher l'extrait de code

image1.parentNode.className+=' box';

.box { width: 100px; height:100px; background: red; }

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

Développer l'extrait

Kamil Kiełczewski
la source

0

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')

Athira V Ajit
la source

-4

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 name

Pour 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 name

Pour 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 name

J'espère que cela est utile pour sombody

Anon
la source

-9

Dans YUI, si vous incluez yuidom , vous pouvez utiliser

YAHOO.util.Dom.addClass('div1','className');

HTH

Alagu
la source

12

Il a dit JavaScript, pas jQuery ou YUI.

Radek

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

Réponses:

Si vous ne ciblez que les navigateurs modernes:

Si vous devez prendre en charge Internet Explorer 9 ou une version antérieure:

Ajouter une classe

Supprimer la classe

Références

Utilisation du prototype

Utiliser YUI

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

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

Le plus court