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

Como instalar o DBEAVEr via PPA no Ubuntu Linux e derivados.

Como instalar o DBEAVEr via PPA no Ubuntu Linux e derivados.

Vamos a mais um post HOW TO…. Abra o Terminal: Você pode fazer isso procurando por “Terminal” no menu de... Leia mais

Entendendo o Service Container no Laravel

Entendendo o Service Container no Laravel

Quando você trabalha com Laravel, uma das ferramentas mais poderosas sob o capô é o Service Container. Mas o que... Leia mais

Criando uma nova branch a partir da develop pelo terminal com GIT

Criando uma nova branch a partir da develop pelo terminal com GIT

Para criar uma nova branch a partir da branch develop usando o terminal com o Git, siga os seguintes passos:... 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