html - Como posso mudar a classe de um elemento com JavaScript?

Como posso mudar a classe de um elemento HTML em resposta a um onclick ou qualquer outro evento usando JavaScript?

Resposta #1

Técnicas modernas de HTML5 para alterar classes

Os navegadores modernos adicionaram classList, que fornece métodos para facilitar a manipulação de classes sem precisar de uma biblioteca:

document.getElementById("MyElement").classList.add('MyClass');

document.getElementById("MyElement").classList.remove('MyClass');

if ( document.getElementById("MyElement").classList.contains('MyClass') )

document.getElementById("MyElement").classList.toggle('MyClass');

Infelizmente, estes não funcionam no Internet Explorer antes da versão 10, embora exista um shim para adicionar suporte a ele no IE8 e IE9, disponível nesta página. No entanto, está sendo cada vez mais suportado.

Solução simples para múltiplos navegadores

A forma padrão em JavaScript de selecionar um elemento é usando document.getElementById("Id"), que é o que os exemplos seguintes utilizam - você, é claro, pode obter elementos de outras maneiras, e na situação certa pode simplesmente usar this em vez disso - no entanto, entrar em detalhes sobre isso está além do escopo da resposta.

Para alterar todas as classes de um elemento:

Para substituir todas as classes existentes por uma ou mais novas classes, defina o atributo className:

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

(Você pode usar uma lista separada por espaços para aplicar várias classes.)

Para adicionar uma classe adicional a um elemento:

Para adicionar uma classe a um elemento, sem remover/afetar os valores existentes, adicione um espaço e o novo nome de classe, assim:

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

Para remover uma classe de um elemento:

Para remover uma única classe de um elemento, sem afetar outras classes potenciais, é necessário um simples replace com regex:

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */

Uma explicação deste regex é a seguinte:

(?:^|\s) # Match the start of the string or any single whitespace character

MyClass  # The literal text for the classname to remove

(?!\S)   # Negative lookahead to verify the above is the whole classname
         # Ensures there is no non-space character following
         # (i.e. must be the end of the string or space)

A flag g indica que o replace deve se repetir conforme necessário, caso o nome da classe tenha sido adicionado várias vezes.

Para verificar se uma classe já está aplicada a um elemento:

O mesmo regex usado acima para remover uma classe também pode ser usado como uma verificação para saber se uma determinada classe existe:

if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )

Atribuindo essas ações aos eventos onClick:

Embora seja possível escrever JavaScript diretamente dentro dos atributos de evento HTML (como onClick="this.className+=' MyClass'"), isso não é um comportamento recomendado. Especialmente em aplicações maiores, um código mais fácil de manter é obtido separando a marcação HTML da lógica de interação JavaScript.

O primeiro passo para conseguir isso é criando uma função e chamando a função no atributo onClick, por exemplo:

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }
</script>
...
<button onClick="changeClass()">My Button</button>

_{(Não é necessário ter este código em tags de script, isso é apenas para a brevidade do exemplo, e incluir o JavaScript em um arquivo distinto pode ser mais apropriado.)}

O segundo passo é mover o evento onClick do HTML para o JavaScript, por exemplo, usando addEventListener

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }

    window.onload = function(){
        document.getElementById("MyElement").addEventListener( 'click', changeClass);
    }
</script>
...
<button id="MyElement">My Button</button>

(Observe que a parte window.onload é necessária para que o conteúdo dessa função seja executado após o HTML ter terminado de carregar - sem isso, o MyElement pode não existir quando o código JavaScript for chamado, então essa linha falharia.)

Frameworks e Bibliotecas JavaScript

O código acima está todo em JavaScript padrão, entretanto, é prática comum usar um framework ou uma biblioteca para simplificar tarefas comuns, bem como se beneficiar de bugs corrigidos e casos extremos que você talvez não pense ao escrever seu código.

Enquanto algumas pessoas consideram exagero adicionar um framework de ~50 KB apenas para mudar uma classe, se você estiver fazendo qualquer quantidade substancial de trabalho com JavaScript ou algo que possa ter comportamento incomum entre navegadores, vale muito a pena considerar.

(De forma muito simplificada, uma biblioteca é um conjunto de ferramentas projetadas para uma tarefa específica, enquanto um framework geralmente contém múltiplas bibliotecas e realiza um conjunto completo de funções.)

Os exemplos acima foram reproduzidos abaixo usando jQuery, provavelmente a biblioteca JavaScript mais comumente usada (embora existam outras que também valem a pena investigar).

(Observe que $ aqui é o objeto jQuery.)

Alterando Classes com jQuery:

$('#MyElement').addClass('MyClass');

$('#MyElement').removeClass('MyClass');

if ( $('#MyElement').hasClass('MyClass') )

Além disso, o jQuery fornece um atalho para adicionar uma classe se ela não se aplicar, ou remover uma classe que se aplica:

$('#MyElement').toggleClass('MyClass');

$('#MyElement').click(changeClass);

ou, sem precisar de um documento de identidade:

$(':button:contains(My Button)').click(changeClass);

Resposta #2

Você também poderia simplesmente fazer:

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

E para alternar uma classe (remover se existir, caso contrário adicionar):

document.getElementById('id').classList.toggle('class');

Resposta #3

Em um dos meus antigos projetos que não usava jQuery, eu construí as seguintes funções para adicionar, remover e verificar se um elemento possui uma classe:

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(ele, cls) {
    if (!hasClass(ele, cls))
        ele.className += " " + cls;
}

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

Então, por exemplo, se eu quiser que onclick adicione alguma classe ao botão, eu posso usar isto:

<script type="text/javascript">
    function changeClass(btn, cls) {
        if(!hasClass(btn, cls)) {
            addClass(btn, cls);
        }
    }
</script>
...
<button onclick="changeClass(this, "someClass")">My Button</button>

A essa altura, com certeza seria melhor apenas usar jQuery.

Resposta #4

Você pode usar node.className assim:

document.getElementById('foo').className = 'bar';

Isso deve funcionar no Internet Explorer 5.5 e versões superiores segundo PPK.

Resposta #5

Usando código JavaScript puro:

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(ele, cls) {
    if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

function replaceClass(ele, oldClass, newClass){
    if(hasClass(ele, oldClass)){
        removeClass(ele, oldClass);
        addClass(ele, newClass);
    }
    return;
}

function toggleClass(ele, cls1, cls2){
    if(hasClass(ele, cls1)){
        replaceClass(ele, cls1, cls2);
    }else if(hasClass(ele, cls2)){
        replaceClass(ele, cls2, cls1);
    }else{
        addClass(ele, cls1);
    }
}

Resposta #6

Uau, surpreso que haja tantas respostas exageradas aqui...

<div class="firstClass" onclick="this.className='secondClass'">

Resposta #7

4 ações possíveis: Adicionar, Remover, Verificar e Alternar

Vamos ver várias maneiras para cada ação.

1. Adicionar classe

Método 1: A melhor maneira de adicionar uma classe no navegador moderno é usando o método classList.add() do elemento.

• Caso 1: Adicionando uma única classe

  function addClass() {
    let element = document.getElementById('id1');
  
    // adding class
    element.classList.add('beautify');
  }
  

• Caso 2: Adicionando múltiplas classes

  Para adicionar várias classes, separe as classes por uma vírgula no método add()

  function addClass() {
    let element = document.getElementById('id1');
  
    // adding multiple class
    element.classList.add('class1', 'class2', 'class3');
  }
  

Método 2 - Você também pode adicionar classes a elementos HTML usando a propriedade className.

• Caso 1: Sobrescrevendo classes pré-existentes Quando você atribui uma nova classe à propriedade className, ela sobrescreve a classe anterior.

  function addClass() {
    let element = document.getElementById('id1');
  
    // adding multiple class
    element.className = 'beautify';
  }
  

• Caso 2: Adicionando classe sem sobrescrever Use o operador += para que a classe não sobrescreva classes anteriores. Além disso, adicione um espaço extra antes da nova classe.

  function addClass() {
    let element = document.getElementById('id1');
  
    // adding single multiple class
    element.className += ' beautify';
    // adding multiple classes
    element.className += ' class1 class2 class3';
  }
  

2. Remover classe

Método 1 - A melhor maneira de remover uma classe de um elemento é o método classList.remove().

• Caso 1: Remover classe única

  Basta passar o nome da classe que você deseja remover do elemento no método.

  function removeClass() {
    let element = document.getElementById('id1');
  
    // removing class
    element.classList.remove('beautify');
  }
  

• Caso 2: Remover várias classes

  Passe várias classes separadas por vírgula.

  function removeClass() {
    let element = document.getElementById('id1');
  
    // removing class
    element.classList.remove('class1', 'class2', 'class3');
  }
  

Método 2 - Você também pode remover a classe usando o método className.

• Caso 1: Removendo uma única classe Se o elemento tiver apenas 1 classe e você quiser removê-la, basta atribuir uma string vazia ao método className.

  function removeClass() {
    let element = document.getElementById('id1');
  
    // removing class
    element.className = '';
  }
  

• Caso 2: Removendo várias classes Se o elemento tiver várias classes, primeiro obtenha todas as classes do elemento usando a propriedade className e use o método replace para substituir as classes desejadas por uma string vazia e, finalmente, atribua isso à propriedade className do elemento.

  function removeClass() {
    let element = document.getElementById('id1');
  
    // removing class
    element.className = element.className.replace('class1', '');
  }
  

3. Verificando a classe

Para verificar se uma classe existe no elemento, você pode simplesmente usar o método classList.contains(). Ele retorna true se a classe existir, caso contrário retorna false.

function checkClass() {
  let element = document.getElementById('id1');

  // checking class
  if(element.classList.contains('beautify') {
      alert('Yes! class exists');
  }
}

4. Alternar classe

Para alternar uma classe, use o método classList.toggle().

function toggleClass() {
    let element = document.getElementById('id1');

    // toggle class
    element.classList.toggle('beautify');
}

Resposta #8

Isso está funcionando para mim:

function setCSS(eleID) {
    var currTabElem = document.getElementById(eleID);

    currTabElem.setAttribute("class", "some_class_name");
    currTabElem.setAttribute("className", "some_class_name");
}

Resposta #9

Você também pode estender o objeto HTMLElement, a fim de adicionar métodos para adicionar, remover, alternar e verificar classes (gist):

HTMLElement = typeof(HTMLElement) != 'undefiend' ? HTMLElement : Element;

HTMLElement.prototype.addClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    if (string[i] && !new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)').test(this.className)) {
      this.className = this.className.trim() + ' ' + string[i];
    }
  }
}

HTMLElement.prototype.removeClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    this.className = this.className.replace(new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)'), ' ').trim();
  }
}

HTMLElement.prototype.toggleClass = function(string) {
  if (string) {
    if (new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className)) {
      this.className = this.className.replace(new RegExp('(\\s+|^)' + string + '(\\s+|$)'), ' ').trim();
    } else {
      this.className = this.className.trim() + ' ' + string;
    }
  }
}

HTMLElement.prototype.hasClass = function(string) {
  return string && new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className);
}

E então use assim (ao clicar, ele adicionará ou removerá a classe):

document.getElementById('yourElementId').onclick = function() {
  this.toggleClass('active');
}

Aqui está a demonstração.

Resposta #10

Apenas para adicionar informações de outro framework popular, Google Closures, veja a classe dom/classes deles:

goog.dom.classes.add(element, var_args)

goog.dom.classes.addRemove(element, classesToRemove, classesToAdd)

goog.dom.classes.remove(element, var_args)

Uma opção para selecionar o elemento é usar goog.dom.query com um seletor CSS 3:

var myElement = goog.dom.query("#MyElement")[0];

Resposta #11

Alterar a classe CSS de um elemento com JavaScript no ASP.NET:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        lbSave.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbSave.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
        lbCancel.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbCancel.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
    End If
End Sub

Resposta #12

Algumas pequenas observações e ajustes nas expressões regulares anteriores:

Você vai querer fazer isso globalmente caso a lista de classes tenha o nome da classe mais de uma vez. E, provavelmente, você vai querer remover os espaços das extremidades da lista de classes e converter múltiplos espaços em um único espaço para evitar sequências de espaços. Nenhuma dessas coisas deve ser um problema se o único código mexendo com os nomes das classes usar a regex abaixo e remover um nome antes de adicioná-lo. Mas. Bem, quem sabe quem pode estar mexendo com a lista de nomes de classes.

Este regex é insensível a maiúsculas e minúsculas para que erros em nomes de classes possam aparecer antes que o código seja usado em um navegador que não se importa com maiúsculas e minúsculas em nomes de classes.

var s = "testing   one   four  one  two";
var cls = "one";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "test";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "testing";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "tWo";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");

Resposta #13

A linha

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/\bMyClass\b/','')

deve ser:

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/','');

Resposta #14

Eu usaria jQuery e escreveria algo assim:

jQuery(function($) {
    $("#some-element").click(function() {
        $(this).toggleClass("clicked");
    });
});

Este código adiciona uma função para ser chamada quando um elemento com o id some-element for clicado. A função adiciona clicked ao atributo class do elemento se ele ainda não fizer parte dele, e o remove se já estiver presente.

Sim, você precisa adicionar uma referência à biblioteca jQuery na sua página para usar este código, mas pelo menos você pode se sentir confiante de que a maioria das funções da biblioteca funcionará em praticamente todos os navegadores modernos, e isso economizará seu tempo implementando seu próprio código para fazer o mesmo.

Resposta #15

Alterar a classe de um elemento em JavaScript puro com suporte ao Internet Explorer 6

Você pode tentar usar a propriedade attributes do nó para manter a compatibilidade com navegadores antigos, até o Internet Explorer 6:

function getClassNode(element) {
  for (var i = element.attributes.length; i--;)
    if (element.attributes[i].nodeName === 'class')
      return element.attributes[i];
}

function removeClass(classNode, className) {
  var index, classList = classNode.value.split(' ');
  if ((index = classList.indexOf(className)) > -1) {
    classList.splice(index, 1);
    classNode.value = classList.join(' ');
  }
}

function hasClass(classNode, className) {
  return classNode.value.indexOf(className) > -1;
}

function addClass(classNode, className) {
  if (!hasClass(classNode, className))
    classNode.value += ' ' + className;
}

document.getElementById('message').addEventListener('click', function() {
  var classNode = getClassNode(this);
  var className = hasClass(classNode, 'red') && 'blue' || 'red';

  removeClass(classNode, 'red');
  removeClass(classNode, 'blue');

  addClass(classNode, className);
})

.red {
  color: red;
}
.red:before {
  content: 'I am red! ';
}
.red:after {
  content: ' again';
}
.blue {
  color: blue;
}
.blue:before {
  content: 'I am blue! '
}

<span id="message" class="">Click me</span>

Resposta #16

Aqui está a minha versão, totalmente funcional:

function addHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    obj.className += " " + classname
}

function removeHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    var classes = ""+obj.className
    while (classes.indexOf(classname)>-1) {
        classes = classes.replace (classname, "")
    }
    obj.className = classes
}

Uso :

<tr onmouseover='addHTMLClass(this,"clsSelected")'
onmouseout='removeHTMLClass(this,"clsSelected")' >

Resposta #17

Aqui está um toggleClass para alternar/adicionar/remover uma classe em um elemento:

// If newState is provided add/remove theClass accordingly, otherwise toggle theClass
function toggleClass(elem, theClass, newState) {
    var matchRegExp = new RegExp('(?:^|\\s)' + theClass + '(?!\\S)', 'g');
    var add=(arguments.length>2 ? newState : (elem.className.match(matchRegExp) == null));

    elem.className=elem.className.replace(matchRegExp, ''); // clear all
    if (add) elem.className += ' ' + theClass;
}

Veja o JSFiddle.

Veja também minha resposta aqui para criar uma nova classe dinamicamente.

Resposta #18

Eu uso as seguintes funções de JavaScript puro no meu código. Elas usam expressões regulares e indexOf, mas não exigem que caracteres especiais sejam colocados entre aspas nas expressões regulares.

function addClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) < 0) {
        el.className = (c0 + c1).replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

function delClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) >= 0) {
        el.className = c0.replace(c1, " ").replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

Você também pode usar element.classList em navegadores modernos.