1188

Eu tenho um elemento que já tem uma classe:

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

Agora, quero criar uma função JavaScript que adicione uma classe ao div(não substitua, mas adicione).

Como eu posso fazer isso?

javascript css dom-manipulation Blankman
fonte

9

Para quem estiver lendo este tópico em 2020 ou posterior, pule o método className antigo e use element.classList.add("my-class").

Pikamander2 3/01

1920

Se você está segmentando apenas navegadores modernos:

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

Se você precisar oferecer suporte ao Internet Explorer 9 ou inferior:

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 .

Ismael
fonte

26

Se o único trabalho na página inteira que precisa ser feito com JavaScript é essa adição de nome de classe, então sim. Mas não vejo essa sendo a única parte dinâmica da página. Uma biblioteca também ajudará com todo o resto. A 30-50kb, o jQuery dificilmente é um sucesso que vale a pena discutir.

Rfunduk 03/02/09

167

"Uma biblioteca também ajudará com tudo o resto" - além de aprender JavaScript

meouw 03/02/09

19

O que adicionar uma classe a um elemento DOM tem a ver com o aprendizado do idioma? document.getElementById ('div1'). className é um problema relacionado à biblioteca, tanto quanto usar o jQuery para fazer o mesmo. A pergunta era "como posso fazer isso", uma biblioteca completamente testada é a resposta sensata.

Rfunduk 03/02/09

6

@ thenduks: Tenho certeza que você conhece esse JavaScript! == jQuery. É bom que as respostas a essa pergunta incluam soluções de bibliotecas e não bibliotecas, porque é importante saber como as coisas funcionam e não apenas a maneira mais simples de realizá-las. Você notará que esta pergunta está marcada com javascript

meouw 03/02

2

@ meouw: eu concordo com você. O jQuery é escrito em JavaScript, no entanto, afirmo que mencionar ao OP que uma biblioteca é uma boa idéia não é 'empurrar uma estrutura para a garganta'. Isso é tudo.

Rfunduk 04/02/09

1351

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 .

Yuri
fonte

67

É uma pena que isso não seja suportado antes do IE 10.0, porque é um excelente recurso e a solução mais fácil para um problema que encontro com frequência.

mricci

12

Um polyfill para classList está disponível.

Wcandillon

10

docs element.classList no MDN.

willlma

11

Este parece ser o melhor para usar, como aqueles com espaço pelo menos sentir como hacks - não mento para adicionar classes ...

prata Ringvee

5

@SilverRingvee Um risco adicional da abordagem espacial é que algum outro desenvolvedor talvez não saiba que é vital e a remova para limpar as coisas.

akauppi

178

encontre o elemento de destino "d" como desejar e depois:

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

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

annakata
fonte

E para remover usando este método?

DeathGrip

3

O @DeathGrip simplesmente define a classe de volta para um único nome definido d.className = 'originalClass';

TheTechy

@ TheTechy - se você tiver mais de uma classe que precisa manter (o que acontece muito hoje em dia), isso não funcionará.

Mark Schultheiss

1

Para remover da maneira antiga, 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.

Stijn de Witt

131

Adicionar classe

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

Removendo a classe

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;

Referências

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

davidcondrey
fonte

Uau, obrigado :) A versão abreviada ( a.classList ? ...) terá alguma diferença de velocidade em comparação com a versão normal ( if (a.classList) { ....)?

Wilf

5

Tem o olso classList.remove(). Por que você não usou? é muito mais rápido do que jQuery jsperf.com/remove-class-vanilla-vs-jquery

Fez Vrasta

O @FezVrasta classList não é suportado antes do IE 10, que ainda possui uma participação de mercado decente (+ 13% no netmarketshare.com).

Adam

6

@ Adam ele usou classListpara tudo, exceto para remover as aulas, é por isso que estou perguntando.

Fez Vrasta

@FezVrasta Em compatibilidade cruzada , usei .add (), mas somente depois de verificar se ela está disponível, compatibilidade cruzada com hense . Para remover, não me preocupei em me repetir, para não incluir tantas opções.

Davidcondrey #

33

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

Shoaib Chikate
fonte

4

Isso já foi respondido várias vezes por outros usuários, incluindo discussões sobre suporte e shims do navegador.

precisa saber é o seguinte

@bafromca Eu não vi que a resposta anterior foi dada e é o meu erro. Você pode sinalizar esta resposta

Shoaib Chikate

3

@ShoaibChikate: você também pode excluir a resposta, se desejar (manterá os pontos). Apenas tentando reduzir a desordem nessa questão; totalmente com você.

Dan Dascalescu

22

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

meouw
fonte

15

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á.

Alexandre Dieulot

1

você deve usar element.className.split(" ");para evitar o problema @AlexandreDieulot relatado aqui.

Amir Fo

20

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.

rfunduk
fonte

15

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

sjv
fonte

muito bom, mas não suportado no IE <= 9 ou Safari <= 5.0 ... :( ( caniuse.com/classlist )

simon

1

Isso já foi discutido , incluindo o suporte ao navegador.

Dan Dascalescu

10

Para adicionar uma classe adicional a um elemento:

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 alterar todas as classes para um elemento:

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

Mo.
fonte

6

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

Ferran Maylinch
fonte

5

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

Yuvaraj
fonte

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

Expandir snippet

asdru
fonte

4

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.

Misko
fonte

4

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

Marcos Fernandez Ramos
fonte

4

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>

Expandir snippet

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>

Expandir snippet

Vladimir Jovanović
fonte

3

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

Expandir snippet

bvmCoder
fonte

2

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

Vasyl Gutnyk
fonte

1

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

SD
fonte

0

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>

tehvan
fonte

1

ele substituirá a classe não anexada! Talvez seja uma linha está ausente ou uma Oldclass +" "+ classToAppend em vez do último classToAppend

Vinze

indexOfé uma solução ingênua e tem um problema já apontado .

Dan Dascalescu

0

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

KevinOrfas
fonte

Isso já foi discutido , juntamente com o suporte ao navegador.

Dan Dascalescu

0

Mais curto

image1.parentNode.className+=' box';

Mostrar snippet de código

image1.parentNode.className+=' box';

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

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

Expandir snippet

Kamil Kiełczewski
fonte

0

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

Athira V Ajit
fonte

-4

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 name

Para 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 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

Anon
fonte

-9

Na YUI, se você incluir yuidom , poderá usar

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

HTH

Alagu
fonte

12

Dizia JavaScript, não jQuery ou YUI.

Radek

Como adiciono uma classe a um determinado elemento?

Respostas:

Se você está segmentando apenas navegadores modernos:

Se você precisar oferecer suporte ao Internet Explorer 9 ou inferior:

Adicionar classe

Removendo a classe

Referências

Usando o protótipo

Usando YUI

Para adicionar uma classe adicional a um elemento:

Para alterar todas as classes para um elemento:

Mais curto