Como é que adiciono uma classe a um dado elemento?
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 irá adicionar uma classe ao div (não substituir, mas adicionar).
22 answers
Adicione um espaço mais o nome da sua nova classe à propriedade className do elemento. Primeiro, coloque um id no elemento para que você possa facilmente obter uma referência.
<div id="div1" class="someclass">
<img ... id="image1" name="image1" />
</div>
Depois
var d = document.getElementById("div1");
d.className += " otherclass";
Ver também elemento.className on MDN .
A maneira mais fácil de fazer isto sem qualquer framework é usar elemento.classList.método de adicionar .
var element = document.getElementById("div1");
element.classList.add("otherclass");
Editar: E se quiser remover a classe de um elemento -
element.classList.remove("otherclass");
Prefiro não ter de adicionar nenhum espaço vazio e duplicar o tratamento de Entradas (o que é necessário quando se utiliza a abordagem document.className). Existem algumas limitações do navegador , mas você pode trabalhar em torno delas usando polifills .
Encontre o seu elemento-alvo " d " como quiser e depois:
d.className += ' additionalClass'; //note the space
Você pode embrulhar isso em formas mais inteligentes para verificar a pré-existência, e verificar os requisitos de espaço, etc..
Adicionar Classe
-
Compatível Com Cruz
No seguinte exemplo adicionamos um
classnameao elemento<body>. Isto é compatível com o IE-8.
Isto é abreviatura para o seguinte..var a = document.body; a.classList ? a.classList.add('classname') : a.className += ' classname';var a = document.body; if (a.classList) { a.classList.add('wait'); } else { a.className += ' wait'; }
-
Desempenho
Se estiver mais preocupado com o desempenho sobre a compatibilidade cruzada, pode reduzi-lo para o seguinte, que é 4% rapidamente.
var z = document.body; document.body.classList.add('wait');
-
Conveniência
Em alternativa, pode usar o jQuery, mas o desempenho resultante é significativamente mais lento. 94% mais lento de acordo com jsPerf
$('body').addClass('wait');
Remover a classe
-
Desempenho
Usar o jQuery selectivamente é o melhor método para remover uma classe se estiver preocupado com 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")
Utilizar 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 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 a fazer não justifica a utilização de uma biblioteca, uso 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;
}
$(document).ready( function() {
$('#div1').addClass( 'some_other_class' );
} );
Vê o jQuery Navegador API para outras coisas.
Podes usar a lista de alunos.adicionar ou classList.remover o método para adicionar / remover uma classe de um elemento.
var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")
O código acima irá adicionar (e não substituir) uma classe "anyclass" ao nomeelem. Da mesma forma você pode usar classList.remover () método para remover uma classe.
nameElem.classList.remove("anyclss")
Para adicionar uma classe adicional a um elemento:
Para adicionar uma classe a um elemento, sem remover / afectar os valores existentes, adicione um espaço e o novo nome da classe, como por exemplo:
document.getElementById("MyElement").className += " MyClass";
Mudar todas as classes para um elemento:
Para substituir todas as classes existentes por uma ou mais novas classes, defina o atributo className:
document.getElementById("MyElement").className = "MyClass";
(pode usar uma lista delimitada pelo espaço para aplicar várias classes.)
Se não quiser usar o jQuery e apoiar 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);
}
Apenas para elaborar o que outros já disseram, várias classes CSS são combinadas em uma única cadeia, delimitada por espaços. Assim, se você quisesse programá-lo, simplesmente se pareceria com isto:
<div class="someClass otherClass yetAnotherClass">
<img ... id="image1" name="image1" />
</div>
De lá você pode facilmente derivar o javascript necessário para adicionar uma nova classe... basta adicionar um espaço seguido pela nova classe à propriedade do elemento className. Sabendo disso, você também pode escrever uma função para remover uma classe mais tarde se a necessidade surgir.
Para adicionar, remover ou verificar classes de elementos de uma forma 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');
Eu sei que o IE9 está desligado oficialmente e podemos alcançá-lo com element.classList o que muitos disseram acima, mas eu apenas tentei aprender como ele funciona sem classList com a ajuda de muitas respostas acima eu poderia aprendê-lo.
Abaixo o código estende muitas respostas acima e melhora-as, evitando adicionar 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');
Podes usar uma abordagem moderna semelhante à jQuery
Se precisar de mudar apenas um elemento, o primeiro que o JS encontrar no DOM, pode usar isto:
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>Tenha em mente para deixar um espaço antes do nome da classe.
Se tiver várias classes em que deseja adicionar uma nova classe, pode 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>Amostra com JS puro. No primeiro exemplo, obtemos o id 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";
})
'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)
}
}Eu também acho que a maneira mais rápida é usar o elemento.prototipo.classList como em es5: document.querySelector(".my.super-class").classList.add('new-class')
mas em ie8 não existe tal coisa como elemento.prototipo.classList, de qualquer forma você pode polifilá-lo com este excerto (caiu livre 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
})
}<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>
Pode usar o selector de API para seleccionar o seu elemento e criar uma função com o elemento e o novo nome de classe como parâmetros. Usando classlist para navegadores modernos, else para IE8. Então 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');
Para aqueles que usam Lodash e que querem actualizar className string:
// 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()
Oferece a substituição do nome da 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 isto seja útil para alguém