Técnicas modernas de HTML5 para mudar de classe
Navegadores modernos adicionaram classList, que fornece métodos para facilitar a manipulação de classes sem a necessidade 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, eles não funcionam no Internet Explorer anterior à v10, embora exista uma restrição para adicionar suporte ao IE8 e IE9, disponível nesta página . É, no entanto, cada vez mais suportado .
Solução simples para vários navegadores
A maneira JavaScript padrão de selecionar um elemento está usando document.getElementById("Id"), que é o que os exemplos a seguir usam - é claro que você pode obter elementos de outras maneiras e, na situação certa, pode simplesmente usar this- no entanto, entrar em detalhes sobre isso está além do escopo da resposta.
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.)
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 remover uma classe de um elemento:
Para remover uma única classe de um elemento, sem afetar outras classes em potencial, é necessária uma simples substituição de 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 desse 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 end of string or a space)
O gsinalizador informa à substituição para 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 para verificar se existe uma classe específica:
if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )
Atribuindo essas ações a eventos de clique único:
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 aplicativos maiores, é conseguido um código mais sustentável, 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 esse código em tags de script, isso é apenas por uma questão de brevidade, por exemplo, e incluir o JavaScript em um arquivo distinto pode ser mais apropriado.)
A segunda etapa é mover o evento onclick para fora do HTML e 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 término do carregamento do HTML - sem isso, o MyElement poderá não existir quando o código JavaScript for chamado, para que a linha falhe.)
Frameworks e bibliotecas JavaScript
O código acima é todo em JavaScript padrão, no entanto, é uma prática comum usar uma estrutura ou uma biblioteca para simplificar tarefas comuns, além de se beneficiar de bugs e casos extremos que você pode não pensar ao escrever seu código.
Embora algumas pessoas considerem um exagero adicionar uma estrutura de ~ 50 KB para simplesmente alterar uma classe, se você estiver realizando uma quantidade substancial de trabalho em JavaScript ou qualquer coisa que possa ter um comportamento incomum entre navegadores, vale a pena considerar.
(Muito grosso modo, uma biblioteca é um conjunto de ferramentas projetadas para uma tarefa específica, enquanto uma estrutura geralmente contém várias bibliotecas e executa um conjunto completo de tarefas.)
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 está o objeto jQuery.)
Alterando Classes com o jQuery:
$('#MyElement').addClass('MyClass');
$('#MyElement').removeClass('MyClass');
if ( $('#MyElement').hasClass('MyClass') )
Além disso, o jQuery fornece um atalho para adicionar uma classe, se não se aplicar, ou remover uma classe que:
$('#MyElement').toggleClass('MyClass');
Atribuindo uma função a um evento de clique com jQuery:
$('#MyElement').click(changeClass);
ou, sem precisar de um ID:
$(':button:contains(My Button)').click(changeClass);