Risposte:
Utilizzare element.classList.add per aggiungere una classe:
element.classList.add("my-class");E element.classList.remove per rimuovere una classe:
element.classList.remove("my-class");Aggiungi uno spazio più il nome della tua nuova classe alla classNameproprietà dell'elemento. Innanzitutto, inserisci un idelemento in modo da poter ottenere facilmente un riferimento.
<div id="div1" class="someclass">
<img ... id="image1" name="image1" />
</div>Poi
var d = document.getElementById("div1");
d.className += " otherclass";Nota lo spazio prima otherclass. È importante includere lo spazio, altrimenti compromette le classi esistenti che lo precedono nell'elenco delle classi.
Vedi anche element.className su MDN .
Il modo più semplice per farlo senza alcun framework è usare il metodo element.classList.add .
var element = document.getElementById("div1");
element.classList.add("otherclass");Modifica: e se vuoi rimuovere la classe da un elemento -
element.classList.remove("otherclass");Preferisco non dover aggiungere spazi vuoti e duplicare le voci gestendomi da me stesso (che è necessario quando si utilizza l' document.classNameapproccio). Esistono alcune limitazioni del browser , ma puoi aggirarle usando i polyfill .
trova l'elemento target "d" come preferisci e poi:
d.className += ' additionalClass'; //note the spacepuoi avvolgerlo in modi più intelligenti per verificare la preesistenza, controllare i requisiti di spazio ecc.
splitil nome della classe negli spazi bianchi, rimuovi quello che non desideri dall'array risultante, quindi di joinnuovo l'array ... o usa element.classList.remove.
Cross Compatibile
Nel seguente esempio aggiungiamo classnamea <body>all'elemento. Questo è compatibile con IE-8.
var a = document.body;
a.classList ? a.classList.add('classname') : a.className += ' classname';Questa è una scorciatoia per il seguente ..
var a = document.body;
if (a.classList) {
a.classList.add('wait');
} else {
a.className += ' wait';
}Prestazione
Se sei più interessato alle prestazioni rispetto alla compatibilità incrociata, puoi accorciarle a quanto segue, il 4% più veloce.
var z = document.body;
document.body.classList.add('wait');Convenienza
In alternativa, è possibile utilizzare jQuery ma le prestazioni risultanti sono notevolmente più lente. 94% più lento secondo jsPerf
$('body').addClass('wait');Prestazione
L'uso selettivo di jQuery è il metodo migliore per rimuovere una classe se si è interessati alle prestazioni
var a = document.body, c = ' classname';
$(a).removeClass(c);Senza jQuery è più lento del 32%
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 ? ...) avrà qualche differenza di velocità rispetto a quella normale ( if (a.classList) { ....)?
classList.remove(). Perché non l'hai usato? è molto più veloce di jQuery jsperf.com/remove-class-vanilla-vs-jquery
classListtutto tranne che per rimuovere le lezioni, ecco perché lo sto chiedendo.
Un altro approccio per aggiungere la classe all'elemento usando JavaScript puro
Per aggiungere classe:
document.getElementById("div1").classList.add("classToBeAdded");Per rimuovere la classe:
document.getElementById("div1").classList.remove("classToBeRemoved");Quando il lavoro che sto svolgendo non garantisce l'uso di una libreria, utilizzo queste due funzioni:
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; } Fai attenzione che se aggiungi la classe "btn" con la classe "btn-info" già presente, questo non riesce.
element.className.split(" ");per prevenire il problema @AlexandreDieulot riportato qui.
Supponendo che tu stia facendo molto più che aggiungere questa classe (ad esempio, hai richieste asincrone e così via), consiglierei una libreria come Prototype o jQuery .
Questo renderà molto semplice tutto ciò che devi fare (incluso questo).
Quindi supponiamo che tu abbia jQuery sulla tua pagina ora, potresti usare un codice come questo per aggiungere un nome di classe a un elemento (al caricamento, in questo caso):
$(document).ready( function() {
$('#div1').addClass( 'some_other_class' );
} );Controlla il browser dell'API jQuery per altre cose.
È possibile utilizzare il metodo classList.add OR classList.remove per aggiungere / rimuovere una classe da un elemento.
var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")Il codice sopra aggiungerà (e NON sostituirà) una classe "anyclass" a nameElem. Allo stesso modo è possibile utilizzare il metodo classList.remove () per rimuovere una classe.
nameElem.classList.remove("anyclss")Per aggiungere una classe a un elemento, senza rimuovere / influire sui valori esistenti, aggiungi uno spazio e il nuovo nome classe, in questo modo:
document.getElementById("MyElement").className += " MyClass";Per sostituire tutte le classi esistenti con una o più nuove classi, imposta l'attributo className:
document.getElementById("MyElement").className = "MyClass";(È possibile utilizzare un elenco delimitato da spazi per applicare più classi.)
Se non vuoi usare jQuery e vuoi supportare i browser più vecchi:
function addClass(elem, clazz) {
if (!elemHasClass(elem, clazz)) {
elem.className += " " + clazz;
}
}
function elemHasClass(elem, clazz) {
return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
}So che IE9 è stato chiuso ufficialmente e possiamo ottenerlo con tutti element.classListquelli sopra menzionati, ma ho appena provato a imparare come funziona senza l' classListaiuto di molte risposte sopra.
Il codice seguente estende molte risposte sopra e le migliora evitando l'aggiunta di classi duplicate.
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');Anch'io penso che il modo più veloce sia usare Element.prototype.classList come in es5: document.querySelector(".my.super-class").classList.add('new-class')
ma in ie8 non esiste Element.prototype.classList, comunque puoi riempirlo con questo snippet (sei libero di modificarlo e migliorarlo) ):
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
})
}Giusto per elaborare ciò che altri hanno detto, più classi CSS sono combinate in una singola stringa, delimitata da spazi. Pertanto, se si desidera codificarlo, sarebbe semplicemente così:
<div class="someClass otherClass yetAnotherClass">
<img ... id="image1" name="image1" />
</div>Da lì puoi facilmente derivare il javascript necessario per aggiungere una nuova classe ... basta aggiungere uno spazio seguito dalla nuova classe alla proprietà className dell'elemento. Sapendo questo, puoi anche scrivere una funzione per rimuovere una classe in seguito in caso di necessità.
Per aggiungere, rimuovere o controllare le classi di elementi in modo semplice:
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');È possibile utilizzare un approccio moderno simile a jQuery
Se devi modificare solo un elemento, prima quello che JS troverà in DOM, puoi usare questo:
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>Ricorda di lasciare uno spazio prima del nome della classe.
Se hai più classi in cui desideri aggiungere una nuova classe, puoi usarla in questo modo
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>Penso che sia meglio usare JavaScript puro, che possiamo eseguire sul DOM del browser.
Ecco il modo funzionale per usarlo. Ho usato ES6 ma sentiti libero di usare ES5 e l'espressione della funzione o la definizione della funzione, a seconda del tuo 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)
}
}Campione con JS puro. Nel primo esempio otteniamo l'ID del nostro elemento e aggiungiamo ad esempio 2 classi.
document.addEventListener('DOMContentLoaded', function() {
document.getElementsById('tabGroup').className = "anyClass1 anyClass2";
})Nel secondo esempio otteniamo il nome della classe dell'elemento e ne aggiungiamo altri 1.
document.addEventListener('DOMContentLoaded', function() {
document.getElementsByClassName('tabGroup')[0].className = "tabGroup ready";
})Per coloro che utilizzano Lodash e desiderano aggiornare la classNamestringa:
// 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()per prima cosa, dai un ID al div. Quindi, chiamare la funzione 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>È possibile utilizzare API querySelector per selezionare l'elemento e quindi creare una funzione con l'elemento e il nuovo nome classe come parametri. Utilizzando classlist per browser moderni, altrimenti per IE8. Quindi è possibile chiamare la funzione dopo un evento.
//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'O:
document.getElementById('come_id').classList.add('someclassname')Il primo approccio ha aiutato ad aggiungere la classe quando il secondo approccio non ha funzionato.
Non dimenticare di mantenere uno spazio di fronte al' someclassname' al primo approccio.
Per la rimozione puoi usare:
document.getElementById('some_id').classList.remove('someclassname')Questo codice js funziona per me
fornisce la sostituzione del nome di 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 namePer aggiungere basta usare
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 namePer rimuovere l'uso
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 nameSpero che questo sia utile per sombody
element.classList.add("my-class")invece.