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

Importando Dados de um Arquivo CSV para o PostgreSQL Usando PDO::pgsqlCopyFromArray no Laravel

Importando Dados de um Arquivo CSV para o PostgreSQL Usando PDO::pgsqlCopyFromArray no Laravel

O método PDO::pgsqlCopyFromArray permite copiar dados de um array diretamente para uma tabela no PostgreSQL. Este tutorial mostra como usar... Leia mais

Variáveis Dinâmicas e Referências no PHP

Variáveis Dinâmicas e Referências no PHP

No mundo da programação PHP, compreender o conceito de variáveis de variáveis e o uso de referências é fundamental para... Leia mais

Tutorial: Exportando Imagens Base64 Usando Laravel Excel

Tutorial: Exportando Imagens Base64 Usando Laravel Excel

Neste tutorial, vamos aprender como exportar uma lista de cadastros de clientes para uma planilha Excel, incluindo as fotos dos... Leia mais

Como Usar a Porta 443 para Conexões SSH com o Bitbucket e Contornar Restrições de Rede

Como Usar a Porta 443 para Conexões SSH com o Bitbucket e Contornar Restrições de Rede

Se você já se deparou com a frustrante mensagem de erro “ssh: connect to host bitbucket.org port 22: Network is... Leia mais