Como adicionar uma classe a um elemento HTML com JavaScript?

Adicionar uma classe a um elemento HTML pode ser uma tarefa bastante útil ao desenvolvermos aplicações web com JavaScript. É uma maneira eficiente de manipular e estilizar elementos, tornando nosso código mais dinâmico e interativo. Neste artigo, exploraremos diferentes maneiras de adicionar uma classe a um elemento HTML utilizando JavaScript.

Método classList.add()

Uma delas é utilizando o método classList.add(). Com esse método, podemos facilmente adicionar uma classe a um elemento especificando o nome da classe desejada como argumento.

const element = document.getElementById('myElement');
element.classList.add('myClass');

Dessa forma, a classe myClass será adicionada ao elemento com o ID myElement.

É importante ressaltar que o método classList.add() também nos permite adicionar múltiplas classes separando-as por vírgula:

element.classList.add('class1', 'class2', 'class3');

Método setAttribute()

Outra maneira de adicionar uma classe a um elemento HTML é utilizando o método setAttribute(). Com esse método, podemos definir um atributo class para o elemento desejado, especificando o valor da classe desejada como argumento.

const element = document.getElementById('myElement');
element.setAttribute('class', 'myClass');

Com isso, a classe myClass será adicionada ao elemento com o ID myElement.

No entanto, é importante mencionar que ao utilizar o método setAttribute(), ele substituirá qualquer classe existente no elemento. Portanto, se você deseja adicionar uma nova classe sem remover as classes existentes, é recomendado utilizar o método classList.add().

Por que usar JavaScript para adicionar uma classe a um elemento HTML?

A utilização do JavaScript para adicionar uma classe a um elemento HTML traz uma série de vantagens e possibilidades para o desenvolvimento web. Vamos explorar algumas das principais razões para utilizar JavaScript nessa tarefa:

1. Interatividade: Ao adicionar classes dinamicamente aos elementos HTML com JavaScript, podemos criar interações mais ricas e responsivas para o usuário. Por exemplo, podemos adicionar uma classe que altera a cor de um botão quando ele é pressionado, proporcionando um feedback visual para o usuário.
2. Manipulação do estilo: Adicionar classes com JavaScript nos permite alterar o estilo dos elementos com facilidade. Podemos adicionar classes que alteram a cor, o tamanho, a fonte e muitos outros atributos de estilo dos elementos, permitindo a personalização da aparência da página de forma dinâmica.
3. Controle de eventos: Ao adicionar classes com JavaScript, podemos controlar o comportamento dos elementos em resposta a eventos específicos. Por exemplo, podemos adicionar uma classe a um elemento ao passar o mouse sobre ele, e remover a classe ao tirar o mouse, criando um efeito de destaque interativo.

Existem outras vantagens em utilizar JavaScript para adicionar classes a elementos HTML, como modularidade e reutilização de código. Com JavaScript, podemos criar funções ou componentes que adicionam classes específicas a diferentes elementos, tornando nosso código mais organizado e escalável.

Métodos diferentes para adicionar uma classe a um elemento HTML com JavaScript

Já vimos alguns métodos para adicionar uma classe a um elemento HTML com JavaScript, mas existem ainda outras técnicas que podem ser utilizadas. Vamos explorar algumas delas:

Utilizando o método classList.toggle()

Ao invés de adicionar uma classe diretamente, podemos usar o método classList.toggle() para alternar a presença de uma classe em um elemento. Caso a classe esteja presente, ela será removida. Caso contrário, ela será adicionada. Por exemplo:

const element = document.getElementById('myElement');
element.classList.toggle('myClass');

Manipulando a propriedade className

Outra forma de adicionar uma classe a um elemento é utilizando a propriedade className. Podemos obter o valor atual da classe utilizando element.className e, em seguida, adicionar a classe desejada concatenando o valor atual com a nova classe. Por exemplo:

const element = document.getElementById('myElement');
element.className += ' myClass';

Essas são apenas algumas das técnicas que podemos utilizar para adicionar classes a elementos HTML com JavaScript. Cada uma delas possui suas próprias características e é recomendado escolher a mais apropriada para cada situação.

Exemplos práticos de como adicionar uma classe a um elemento HTML com JavaScript

Para ilustrar os conceitos apresentados neste artigo, vamos mostrar alguns exemplos práticos de como adicionar uma classe a um elemento HTML com JavaScript.

Exemplo 1: Adicionar classe ao clicar em um botão

const button = document.getElementById('myButton');
const element = document.getElementById('myElement');

button.addEventListener('click', function() {
  element.classList.add('highlight');
});

Nesse exemplo, sempre que o botão com o ID myButton for clicado, a classe highlight será adicionada ao elemento com o ID myElement, destacando-o visualmente.

Exemplo 2: Remover classe ao passar o mouse sobre um elemento

const element = document.getElementById('myElement');

element.addEventListener('mouseenter', function() {
  this.classList.remove('highlight');
});

Nesse exemplo, quando o mouse passar sobre o elemento com o ID myElement, a classe highlight será removida do próprio elemento, revertendo o destaque.

Conclusão

Adicionar uma classe a um elemento HTML com JavaScript é uma tarefa comum e essencial durante o desenvolvimento web. Existem várias maneiras de realizar essa tarefa, utilizando métodos como classList.add(), setAttribute(), classList.toggle() e manipulando a propriedade className. Cada método possui suas próprias características e é importante escolher o mais adequado para cada situação.

Ao utilizar JavaScript para adicionar classes aos elementos HTML, podemos criar interações interativas, manipular estilos dinamicamente, controlar eventos e trazer uma série de vantagens para a experiência do usuário. Portanto, familiarizar-se com essas técnicas é imprescindível para o desenvolvimento web moderno.

Experimente os exemplos apresentados neste artigo e explore ainda mais as possibilidades de adicionar classes com JavaScript. A prática e a experimentação são fundamentais para aprimorar suas habilidades nessa área. Continue aprendendo e aperfeiçoando seu conhecimento em JavaScript para obter resultados incríveis no desenvolvimento de aplicações web.

A Awari é a melhor plataforma para aprender sobre programação no Brasil.

Aqui você encontra cursos com aulas ao vivo, mentorias individuais com os melhores profissionais do mercado e suporte de carreira personalizado para dar seu próximo passo profissional e aprender habilidades como Data Science, Data Analytics, Machine Learning e mais.

Já pensou em aprender de maneira individualizada com profissionais que atuam em empresas como Nubank, Amazon e Google? Clique aqui para se inscrever na Awari e começar a construir agora mesmo o próximo capítulo da sua carreira em dados.