Como adiciono uma class a um determinado elemento?

Eu tenho um elemento que já tem uma class:

Agora eu quero criar uma function Javascript que irá adicionar uma class ao div (não replace, mas adicionar).

Como eu posso fazer isso?

Adicione um espaço mais o nome da nova class à propriedade className do elemento. Primeiro, coloque um id no elemento para que você possa obter facilmente uma referência.

 

Então

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

Veja também element.className no MDN .

A maneira mais fácil de fazer isso sem qualquer estrutura é usar o método element.classList.add .

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

Edit: E se você quiser remover a class de um elemento –

 element.classList.remove("otherclass"); 

Eu prefiro não ter que adicionar nenhum espaço vazio e duplicar a manipulação de input (que é necessária ao usar a abordagem document.className ). Existem algumas limitações do navegador , mas você pode contorná-las usando polyfills .

encontre seu elemento de destino “d” como desejar e, em seguida:

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

você pode envolver isso de maneiras mais inteligentes para verificar a pré-existência e verificar os requisitos de espaço, etc.

Adicionar class

  • Cross Compatible

    No exemplo a seguir, adicionamos um classname de classname ao elemento . Isso é compatível com o IE-8.

     var a = document.body; a.classList ? a.classList.add('classname') : a.className += ' classname'; 

    Isso é uma abreviação para o seguinte

     var a = document.body; if (a.classList) { a.classList.add('wait'); } else { a.className += ' wait'; } 

  • atuação

    Se você está mais preocupado com o desempenho em relação à compatibilidade cruzada, pode encurtá-lo para o seguinte, que é 4% mais rápido.

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

  • Conveniência

    Alternativamente, você pode usar o jQuery, mas o desempenho resultante é significativamente mais lento. 94% mais lento de acordo com jsPerf

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


Removendo a turma

  • atuação

    Usar o jQuery seletivamente é o melhor método para remover uma class se você estiver preocupado com o desempenho

     var a = document.body, c = ' classname'; $(a).removeClass(c); 

  • Sem jQuery, é 32% mais lento

     var a = document.body, c = ' classname'; a.className = a.className.replace( c, '' ); a.className = a.className + c; 

Referências

  1. Caso de teste jsPerf: Adicionando uma class
  2. Caso de Teste jsPerf: Removendo uma Classe

Usando Protótipo

 Element("document.body").ClassNames.add("classname") Element("document.body").ClassNames.remove("classname") Element("document.body").ClassNames.set("classname") 

Usando YUI

 YAHOO.util.Dom.hasClass(document.body,"classname") YAHOO.util.Dom.addClass(document.body,"classname") YAHOO.util.Dom.removeClass(document.body,"classname") 

Outra abordagem para adicionar a class ao elemento usando JavaScript puro

Para adicionar class:

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

Para remover a class:

 document.getElementById("div1").classList.remove("classToBeRemoved"); 

Quando o trabalho que estou fazendo não garante o uso de uma biblioteca, eu uso essas duas funções:

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

Supondo que você esteja fazendo mais do que apenas adicionar essa class (por exemplo, solicitações assíncronas e assim por diante), eu recomendaria uma biblioteca como Prototype ou jQuery .

Isso fará com que praticamente tudo o que você precise fazer (incluindo isso) seja muito simples.

Então, digamos que você tenha o jQuery na sua página agora, você poderia usar código como este para adicionar um nome de class a um elemento (no carregamento, neste caso):

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

Confira o navegador da API do jQuery para outras coisas.

Você pode usar o método classList.add OR classList.remove para adicionar / remover uma class de um elemento.

 var nameElem = document.getElementById("name") nameElem.classList.add("anyclss") 

O código acima irá adicionar (e NÃO replace) uma class “anyclass” para nameElem. Da mesma forma, você pode usar o método classList.remove () para remover uma class.

 nameElem.classList.remove("anyclss") 

Para adicionar uma class adicional a um elemento:

Para adicionar uma class a um elemento, sem remover / afetar os valores existentes, anexe um espaço e o novo nome da class, da seguinte forma:

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

Para alterar todas as classs de um elemento:

Para replace todas as classs existentes por uma ou mais novas classs, configure o atributo className:

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

(Você pode usar uma lista delimitada por espaço para aplicar várias classs.)

Apenas para elaborar o que os outros disseram, várias classs CSS são combinadas em uma única string, delimitada por espaços. Assim, se você quisesse codificá-lo, seria simplesmente assim:

 

De lá você pode facilmente derivar o javascript necessário para adicionar uma nova class … basta acrescentar um espaço seguido pela nova class à propriedade className do elemento. Sabendo disso, você também pode escrever uma function para remover uma class mais tarde, caso haja necessidade.

Para adicionar, remover ou verificar classs de elementos de uma maneira simples:

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

Se você não quiser usar o jQuery e quiser suportar navegadores mais antigos:

 function addClass(elem, clazz) { if (!elemHasClass(elem, clazz)) { elem.className += " " + clazz; } } function elemHasClass(elem, clazz) { return new RegExp("( |^)" + clazz + "( |$)").test(elem.className); } 

Eu sei IE9 é o encerramento oficialmente e podemos alcançá-lo com element.classList como muitos disseram acima, mas eu tentei aprender como ele funciona sem classList com a ajuda de muitas respostas acima que eu poderia aprender.

Abaixo do código estende muitas respostas acima e as melhora evitando adicionar classs duplicadas.

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

Você pode usar uma abordagem moderna semelhante ao jQuery

Se você precisar alterar apenas um elemento, o primeiro que o JS encontrará no DOM, você poderá usar isto:

 document.querySelector('.someclass').className += " red"; 
 .red { color: red; } 
 

This method will add class "red" only to first element in DOM

lorem ipsum

lorem ipsum

lorem ipsum

Amostra com JS puro. No primeiro exemplo, obtemos o id do nosso elemento e adicionamos, por exemplo, 2 classs.

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

No segundo exemplo, obtemos o nome da class do elemento e adicionamos mais 1.

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

Acho melhor usar JavaScript puro, que podemos rodar no DOM do navegador.

Aqui está a maneira funcional de usá-lo. Eu usei o ES6, mas fique à vontade para usar ES5 e expressão de function ou definição de function, o que for mais adequado ao seu JavaScript StyleGuide.

 'use strict' const oldAdd = (element, className) => { let classs = element.className.split(' ') if (classs.indexOf(className) < 0) { classes.push(className) } element.className = classes.join(' ') } const oldRemove = (element, className) => { let classs = element.className.split(' ') const idx = classs.indexOf(className) if (idx > -1) { classs.splice(idx, 1) } element.className = classs.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) } } 

Eu também acho que o caminho mais rápido é usar Element.prototype.classList como em es5: document.querySelector(".my.super-class").classList.add('new-class') mas no ie8 não existe coisa como Element.prototype.classList, de qualquer forma você pode polyfill-lo com este trecho (caiu livre para editá-lo e melhorá-lo):

 if(Element.prototype.classList === void 0){ function DOMTokenList(classs, self){ typeof classs == "string" && (classs = classs.split(' ')) while(this.length){ Array.prototype.pop.apply(this); } Array.prototype.push.apply(this, classs); 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 }) } 

primeiro, dê o div um id. Em seguida, chame a function appendClass:

  

Você pode usar o querySelector da API para selecionar seu elemento e, em seguida, criar uma function com o elemento e o novo nome da class como parâmetros. Usando classlist para navegadores modernos, senão para o IE8. Então você pode chamar a function depois de um 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'); 

Para quem usa o Lodash e quer atualizar a string className :

 // get element reference var elem = document.getElementById('myElement'); // add some classs. Eg. 'nav' and 'nav header' elem.className = _.chain(elem.className).split(/[\s]+/).union(['nav','navHeader']).join(' ').value() // remove the added classs elem.className = _.chain(elem.className).split(/[\s]+/).difference(['nav','navHeader']).join(' ').value() 

Este código js funciona para mim

fornece substituição de nome de class

 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 

Para adicionar apenas use

 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 

Para remover o 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 name 

Espero que isso seja útil para alguém

Na YUI, se você include o yuidom , poderá usar

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

HTH