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

Collections no PHP e seu uso no Laravel

Collections no PHP e seu uso no Laravel

Ao desenvolver aplicações modernas com PHP, uma das tarefas mais comuns é manipular arrays — filtrando, transformando ou agrupando dados.... Leia mais

Como resolver o erro “oauth-private.key does not exist or is not readable” no Laravel

Como resolver o erro “oauth-private.key does not exist or is not readable” no Laravel

O Laravel Passport é uma biblioteca que trabalha com o padrão OAuth2 e fornece uma implementação completa do servidor OAuth2.... 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

Converter Date Time String para data no formato YYYY-MM-DD

Converter Date Time String para data no formato YYYY-MM-DD

No post de hoje, vamos abordar uma necessidade comum em programação: como obter uma data no formato ANO-MÊS-DIA (YYYY-MM-DD) a... Leia mais