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

Guia de Deploy de Aplicação Laravel com Apache em uma VPS com Ubuntu e HTTPS

Guia de Deploy de Aplicação Laravel com Apache em uma VPS com Ubuntu e HTTPS

Neste guia, você aprenderá a fazer o deploy de uma aplicação Laravel em uma VPS rodando Ubuntu com o servidor... Leia mais

Estruturas de Dados em Go: Guia Simples com Exemplos Práticos

Estruturas de Dados em Go: Guia Simples com Exemplos Práticos

Go (ou Golang) é uma linguagem de programação eficiente e fácil de usar, conhecida por sua simplicidade, sendo ideal para... Leia mais

Como Resolver Problemas de Permissões ao Usar Docker no WSL2

Como Resolver Problemas de Permissões ao Usar Docker no WSL2

O Docker é uma ferramenta poderosa para gerenciar contêineres, e sua integração com o WSL2 no Windows oferece um ambiente... Leia mais

Primeiros Passos com Go: Criando uma Aplicação Interativa do Zero

Primeiros Passos com Go: Criando uma Aplicação Interativa do Zero

Se você está começando a aprender Go e quer fazer algo prático, vou te mostrar como criar uma aplicação básica... Leia mais