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

Usando Strategy e Pipeline juntos no Laravel para organizar regras complexas

Usando Strategy e Pipeline juntos no Laravel para organizar regras complexas

À medida que um sistema cresce, a lógica de negócio costuma se tornar mais complexa. Um dia você está apenas... Leia mais

Script para automatizar instalações de ferramentas em ambiente LINUX

Script para automatizar instalações de ferramentas em ambiente LINUX

Para agilizar as instalações das minhas ferramentas de desenvolvimento quando for necessário resolvi montar o seguinte script: Basta colocar o... Leia mais

Programação Funcional no Elixir: Fundamentos e Exemplos

Programação Funcional no Elixir: Fundamentos e Exemplos

A programação funcional está se tornando cada vez mais popular devido à sua simplicidade e capacidade de lidar com paralelismo... Leia mais

Um resumo sobre o WSL2

Um resumo sobre o WSL2

O WSL 2 (Windows Subsystem for Linux) representa um grande avanço na integração entre o Windows e o Linux, permitindo... Leia mais