Respostas:
Use element.classList.add para adicionar uma classe:
element.classList.add("my-class");E element.classList.remove para remover uma classe:
element.classList.remove("my-class");Adicione um espaço mais o nome da sua nova classe à classNamepropriedade do elemento Primeiro, coloque um idno elemento para que você possa facilmente obter uma referência.
<div id="div1" class="someclass">
<img ... id="image1" name="image1" />
</div>Então
var d = document.getElementById("div1");
d.className += " otherclass";Observe o espaço antes otherclass. É importante incluir o espaço, caso contrário, ele compromete as classes existentes que vêm antes dele na lista de classes.
Consulte também element.className no MDN .
A maneira mais fácil de fazer isso sem nenhuma estrutura é usar o método element.classList.add .
var element = document.getElementById("div1");
element.classList.add("otherclass");Edit: E se você deseja remover a classe de um elemento -
element.classList.remove("otherclass");Prefiro não ter que adicionar nenhum espaço vazio e duplicar o tratamento de entrada (o que é necessário ao usar a document.classNameabordagem). Existem algumas limitações do navegador , mas você pode contorná-las usando polyfills .
encontre o elemento de destino "d" como desejar e depois:
d.className += ' additionalClass'; //note the spacevocê pode agrupar isso de maneiras mais inteligentes para verificar a pré-existência e verificar os requisitos de espaço etc.
splito nome da classe no espaço em branco, remova o que você não deseja da matriz resultante e depois joina matriz novamente ... ou use element.classList.remove.
Compatível com Cruz
No exemplo a seguir, adicionamos classnamea ao <body>elemento Isso é compatível com o IE-8.
var a = document.body;
a.classList ? a.classList.add('classname') : a.className += ' classname';Este é um atalho 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 da compatibilidade cruzada, pode reduzi-lo para o seguinte, que é 4% mais rápido.
var z = document.body;
document.body.classList.add('wait');Conveniência
Como alternativa, você pode usar o jQuery, mas o desempenho resultante é significativamente mais lento. 94% mais lento de acordo com jsPerf
$('body').addClass('wait');atuação
Usar o jQuery seletivamente é o melhor método para remover uma classe 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;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 ? ...) terá alguma diferença de velocidade em comparação com a versão normal ( if (a.classList) { ....)?
classList.remove(). Por que você não usou? é muito mais rápido do que jQuery jsperf.com/remove-class-vanilla-vs-jquery
classListpara tudo, exceto para remover as aulas, é por isso que estou perguntando.
Outra abordagem para adicionar a classe ao elemento usando JavaScript puro
Para adicionar classe:
document.getElementById("div1").classList.add("classToBeAdded");Para remover a classe:
document.getElementById("div1").classList.remove("classToBeRemoved");Quando o trabalho que estou realizando não justifica o uso de uma biblioteca, utilizo estas 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;
}if( cn.indexOf( classname ) != -1 ) { return; } Lembre-se de que se você adicionar a classe "btn" com a classe "btn-info" já aqui, isso falhará.
element.className.split(" ");para evitar o problema @AlexandreDieulot relatado aqui.
Supondo que você esteja fazendo mais do que apenas adicionar esta classe (por exemplo, você tem solicitações assíncronas e assim por diante), recomendo uma biblioteca como Prototype ou jQuery .
Isso simplificará tudo o que você precisará fazer (incluindo isso).
Então, digamos que você tenha o jQuery em sua página agora, você pode usar um código como este para adicionar um nome de classe a um elemento (em carga, neste caso):
$(document).ready( function() {
$('#div1').addClass( 'some_other_class' );
} );Confira o navegador da API jQuery para outras coisas.
Você pode usar o método classList.add OR classList.remove para adicionar / remover uma classe de um elemento.
var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")O código acima adicionará (e NÃO substituirá) uma classe "anyclass" a nameElem. Da mesma forma, você pode usar o método classList.remove () para remover uma classe.
nameElem.classList.remove("anyclss")Para adicionar uma classe a um elemento, sem remover / afetar os valores existentes, acrescente um espaço e o novo nome da classe, da seguinte maneira:
document.getElementById("MyElement").className += " MyClass";Para substituir todas as classes existentes por uma ou mais novas classes, configure o atributo className:
document.getElementById("MyElement").className = "MyClass";(Você pode usar uma lista delimitada por espaço para aplicar várias classes.)
Se você não deseja usar o jQuery e deseja 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 que o IE9 está encerrado oficialmente e podemos alcançá-lo com o element.classListque foi dito acima, mas tentei aprender como ele funciona semclassList a ajuda de muitas respostas acima.
O código abaixo estende muitas respostas acima e as aprimora, evitando a adição de classes 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');Eu também acho que a maneira mais rápida é usar Element.prototype.classList como no es5: document.querySelector(".my.super-class").classList.add('new-class')
mas no ie8 não existe algo como Element.prototype.classList, de qualquer maneira, você pode preenchê-lo com esse snippet (fique à vontade para editá-lo e melhorá-lo) ):
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
})
}Apenas para elaborar o que os outros disseram, várias classes CSS são combinadas em uma única sequência, delimitada por espaços. Portanto, se você quisesse codificá-lo, seria simplesmente assim:
<div class="someClass otherClass yetAnotherClass">
<img ... id="image1" name="image1" />
</div>A partir daí, você pode derivar facilmente o javascript necessário para adicionar uma nova classe ... basta acrescentar um espaço seguido pela nova classe à propriedade className do elemento. Sabendo disso, você também pode escrever uma função para remover uma classe posteriormente, se necessário.
Para adicionar, remover ou verificar classes 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');Você pode usar uma abordagem moderna semelhante ao jQuery
Se você precisar alterar apenas um elemento, o primeiro que JS encontrará no DOM, você pode usar este:
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>Lembre-se de deixar um espaço antes do nome da classe.
Se você tiver várias classes nas quais deseja adicionar uma nova classe, poderá usá-la assim
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>Eu acho que é melhor usar JavaScript puro, que podemos executar no DOM do navegador.
Aqui está a maneira funcional de usá-lo. Eu usei o ES6, mas sinta-se à vontade para usar o ES5 e a expressão ou definição de função, conforme o seu 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)
}
}Amostra com JS puro. No primeiro exemplo, obtemos a identificação do nosso elemento e adicionamos, por exemplo, 2 classes.
document.addEventListener('DOMContentLoaded', function() {
document.getElementsById('tabGroup').className = "anyClass1 anyClass2";
})No segundo exemplo, obtemos o nome da classe do elemento e adicionamos mais 1.
document.addEventListener('DOMContentLoaded', function() {
document.getElementsByClassName('tabGroup')[0].className = "tabGroup ready";
})Para aqueles que usam o Lodash e desejam atualizar a classNamestring:
// 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()primeiro, dê um ID ao div. Em seguida, chame a função 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>indexOfé uma solução ingênua e tem um problema já apontado .
Você pode usar a querySelector da API para selecionar seu elemento e, em seguida, criar uma função com o elemento e o novo nome da classe como parâmetros. Usando a lista de classes para navegadores modernos, além do IE8. Em seguida, você pode chamar a função após 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');document.getElementById('some_id').className+=' someclassname'OU:
document.getElementById('come_id').classList.add('someclassname')A primeira abordagem ajudou a adicionar a classe quando a segunda abordagem não funcionou.
Não se esqueça de manter um espaço na frente da ' someclassname'primeira abordagem.
Para remoção, você pode usar:
document.getElementById('some_id').classList.remove('someclassname')Esse código js funciona para mim
fornece substituição de nome 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 namePara adicionar basta usar
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 namePara 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 nameEspero que isso seja útil para alguém
element.classList.add("my-class").