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

Rascunho para estudo de programação orientada a objetos em Python

Rascunho para estudo de programação orientada a objetos em Python

A orientação a objetos (OO) é um paradigma de programação central em Python, que facilita a organização e estruturação do... 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 rodar Laravel no WSL com Valet Linux (de verdade)

Como rodar Laravel no WSL com Valet Linux (de verdade)

Sim, dá pra desenvolver Laravel no Windows sem sofrer. Mas você precisa fazer do jeito certo: usando WSL + Valet... Leia mais

Entendendo a Função list() no PHP

Entendendo a Função list() no PHP

A função list() do PHP é uma forma prática de atribuir múltiplos valores de um array a variáveis individuais. Neste... Leia mais