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

Alterar função ONCLICK de um botão com JavaScript Vanilla

Alterar função ONCLICK de um botão com JavaScript Vanilla

Vamos lá a mais um estudo de caso. Na tela abaixo temos um crud simples cujo frontend foi feito com... Leia mais

Usando a Função ROW_NUMBER e Outras Funções para Gerar Resultados Sequenciais no PostgreSQL

Usando a Função ROW_NUMBER e Outras Funções para Gerar Resultados Sequenciais no PostgreSQL

Quando trabalhamos com bancos de dados, muitas vezes precisamos gerar números sequenciais para nossos resultados. Isso pode ser útil para... Leia mais

Solucionando Problemas de Conexão no PostgreSQL: Um Guia Prático

Solucionando Problemas de Conexão no PostgreSQL: Um Guia Prático

Quando se trata de gerenciar bancos de dados, o PostgreSQL se destaca como uma escolha robusta e flexível para desenvolvedores... Leia mais

A função WITH RECURSIVE no PostgreSQL

A função WITH RECURSIVE no PostgreSQL

A função WITH RECURSIVE no PostgreSQL é uma ferramenta poderosa para a execução de consultas recursivas em bancos de dados.... Leia mais