PauloRB.dev

Desenvolvedor de Software

Adicionar e remover classes CSS com Vanilla Javascript | PauloRB.dev Adicionar e remover classes CSS com Vanilla Javascript – PauloRB.dev
Adicionar e remover classes CSS com Vanilla Javascript

Adicionar e remover classes CSS com Vanilla Javascript

Adicionar e remover classes CSS com JQUERY é uma atividade muito simples, mas também através do javascript puro conseguimos o mesmo efeito e com as mesma simplicidade.

Todo elemento do DOM possui uma propriedade classlist que é basicamente o ponto de entrada para se obter e configurar as classes CSS desse Elemento como podemos ver abaixo:

var classes = document.querySelector("#container").classList;

Adicionando uma classe CSS:

Uma classe CSS pode se adicionada da seguinte forma mas se a classe já existir ela será ignorada:

document.querySelector("#container").classList.add('post-image');

Várias classes CSS podem ser adicionadas passando vários parâmetros:
// add class "post" & "post-image" to #container
document.querySelector("#container").classList.add('post', 'post-image');

Removendo uma classe CSS

// remove class "post" & "post-image" from #container
document.querySelector("#container").classList.remove('post-image');

// remove class "post" & "post-image" from #container
document.querySelector("#container").classList.remove('post', 'post-image');

Mais Posts

Definindo o Ano Atual como Valor Padrão em Migrations do Laravel

Definindo o Ano Atual como Valor Padrão em Migrations do Laravel

Ao trabalhar com migrations no Laravel, uma tarefa comum é definir valores padrão para colunas em tabelas de banco de... Leia mais

Controlando um Semáforo e Servo Motor com Arduino: Um Projeto Prático para Iniciantes

Controlando um Semáforo e Servo Motor com Arduino: Um Projeto Prático para Iniciantes

A robótica e a eletrônica são áreas fascinantes que combinam criatividade e lógica para construir soluções incríveis. Hoje, vamos explorar... Leia mais

Laravel: Como visualizar a SQL com os valores preenchidos para facilitar o debug

Laravel: Como visualizar a SQL com os valores preenchidos para facilitar o debug

No dia a dia do desenvolvimento com Laravel, é comum precisarmos inspecionar uma query SQL gerada dinamicamente. A primeira ferramenta... Leia mais

Testando o envio de mensagens de email usando Laravel

Testando o envio de mensagens de email usando Laravel

Enviar mensagens de email é uma parte essencial de muitas aplicações web, e o Laravel, um popular framework PHP, torna... Leia mais