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

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

10 Dicas Essenciais para Desenvolvedores Laravel

10 Dicas Essenciais para Desenvolvedores Laravel

Laravel é um dos frameworks PHP mais populares devido à sua simplicidade, elegância e ferramentas poderosas que aceleram o desenvolvimento.... Leia mais

Como Instalar e Acessar o PostgreSQL no WSL com DBeaver

Como Instalar e Acessar o PostgreSQL no WSL com DBeaver

PostgreSQL é um dos sistemas de gerenciamento de banco de dados mais populares, conhecido por sua robustez e recursos avançados.... Leia mais

Como Instalar e Usar o MailHog com Laravel para Testes de Email

Como Instalar e Usar o MailHog com Laravel para Testes de Email

No desenvolvimento de aplicações web, especialmente no Laravel, enviar emails é uma tarefa comum. Porém, testar o envio de emails... Leia mais