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 Configurar e Gerenciar um Banco de Dados MySQL com Docker Compose

Como Configurar e Gerenciar um Banco de Dados MySQL com Docker Compose

Configurar e gerenciar bancos de dados pode ser uma tarefa desafiadora, especialmente quando você precisa garantir a portabilidade e a... Leia mais

Alternar entre múltiplas versões no PHP

Alternar entre múltiplas versões no PHP

Então problemas do dia-a-dia se por alguma motivo qualquer você prefere utilizar ambientes de desenvolvimento locais ao invés de containers... Leia mais

Como Executar Migrations e Seeders Específicas no Laravel

Como Executar Migrations e Seeders Específicas no Laravel

Para rodar uma migration específica no Laravel, você pode usar o comando migrate com a opção --path. Siga os passos... 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