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

Gerando Dados Fictícios para Análise de Compras em Python

Gerando Dados Fictícios para Análise de Compras em Python

Ao realizar estudos de análise de dados ou ao testar sistemas que lidam com grandes volumes de informações, é comum... Leia mais

🔍Laravel: Eloquent vs Query Builder — Qual usar para cada situação?

🔍Laravel: Eloquent vs Query Builder — Qual usar para cada situação?

No ecossistema Laravel, há duas formas principais de interagir com o banco de dados: o Eloquent ORM e o Query... Leia mais

Entendendo o Commit Semântico e por que ele é essencial para o seu projeto

Entendendo o Commit Semântico e por que ele é essencial para o seu projeto

Quando trabalhamos com projetos de software, o controle de versão é uma parte fundamental para garantir colaboração e organização. Entretanto,... Leia mais

Como acessar o entity Manager(Doctrine) dentro de comandos no Symfony 5

Como acessar o entity Manager(Doctrine) dentro de comandos no Symfony 5

Ao termos de criar comandos personalizados no Symfony na maioria das vezes se faz necessário o uso de alguma interação... Leia mais