Alterar a classe de um elemento HTML com JavaScript

1. Selecione um elemento HTML em JavaScript
2. Alterar todas as classes aplicáveis ​​a um elemento em JavaScript
3. Insira uma classe extra para o elemento em JavaScript
4. Excluir uma classe em um elemento em JavaScript
5. Verifique se uma classe foi usada em um elemento em JavaScript

Este artigo demonstra como alterar a classe de um elemento HTML em resposta a eventos JavaScript.

Selecione um elemento HTML em JavaScript

Indiscutivelmente, a maneira mais fácil de selecionar um elemento HTML em JavaScript é por meio de document.getElementById().

Por exemplo, se você precisa selecionar um elemento com a ID de classe Alunos, veja como selecioná-lo.

document.getElementById('Students')

Alterar todas as classes aplicáveis ​​a um elemento em JavaScript

Após selecionar o elemento usando seu ID de classe, você pode alterar sua classe ou substituir todas as suas classes, conforme mostrado acima. Você precisará definir uma nova usando o atributo .className para substituir a classe antiga, conforme mostrado abaixo.

Document.getElementById('Fruits').classname = 'Veggies';

Insira uma classe extra para o elemento em JavaScript

Você também pode adicionar uma nova classe a um elemento sem alterar nenhuma das classes existentes. Você pode fazer isso usando o operador += para adicionar a nova classe.

Por exemplo,

Document.getElementById('Subjects').className += 'Physics';

Ele adiciona uma classe extra chamada Física a outras classes no elemento Assuntos.

Excluir uma classe em um elemento em JavaScript

Excluir uma única classe em um elemento sem afetar outras classes é um pouco mais complexo. Você precisará usar .className.replace junto com o seguinte regex.

?:^|\s)RemoveThis(?!\S)/g

• ?:^|\s captura o início de uma string e / ou qualquer caractere de espaço em branco único usado.
• RemoveThis é o nome da classe a ser removida.
• (?!\S) verifica se RemoveThis é um nome de classe completo e verifica se há caracteres que não sejam espaços no final. Em outras palavras, ele garante que a regex seja colocada no final da string.
• g é o sinalizador que garante que o comando de substituição seja efetuado conforme necessário em todos os casos em que a classe foi adicionada.

Veja o exemplo abaixo.

document.getElementById('ElementOne').className =
    document.getElementById('ElementOne')
        .className.replace(/(?:^|\s)RemoveThis(?!\S)/g, '')

Verifique se uma classe foi usada em um elemento em JavaScript

Para verificar se uma classe foi aplicada a um elemento específico, você pode usar o regex acima. Isso é melhor alcançado usando um if(); declaração para dar um resultado. Por exemplo:

if (document.getElementById('ElementOne')
        .className.match(/(?:^|\s)ClassOne(?!\S)/))
print('Class has been used.')

A saída será Class has been used se a verificação for positiva, ou nenhuma saída se for negativa, a menos que uma ação ou saída alternativa seja definida com a instrução else.

Não é recomendável escrever código JavaScript diretamente nos atributos de evento HTML. Isso pode dificultar a execução e tornar os aplicativos mais lentos. Em vez disso, você pode escrever o JavaScript em uma função, chamando a referida função em um atributo onclick e movendo o evento do código HTML para o JavaScript. Você pode fazer isso com o atributo .addEventListener().