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

Função para fazer a tecla ENTER funcionar como a tecla TAB em formulários web.

Função para fazer a tecla ENTER funcionar como a tecla TAB em formulários web.

Segue função em Jquery que utilizei muito em projetos para permitir o comportamento da tecla TAB(pular campos do formulários) utilizando... Leia mais

Por que whereNull não funciona com updateOrCreate no Laravel (e como evitar bugs silenciosos)

Por que whereNull não funciona com updateOrCreate no Laravel (e como evitar bugs silenciosos)

O updateOrCreate() é um dos métodos mais utilizados no Eloquent para garantir que registros sejam atualizados ou criados sem duplicações.... Leia mais

Como Instalar o PostgreSQL 16 no Linux Mint 21

Como Instalar o PostgreSQL 16 no Linux Mint 21

O PostgreSQL 16 ainda não está disponível nos repositórios oficiais do Linux Mint 21, então usaremos o repositório oficial do... Leia mais

Design Pattern Facade em PHP : Exemplo prático

Design Pattern Facade em PHP : Exemplo prático

O Design Pattern Facade é uma solução elegante para simplificar a interface de um subsistema complexo, tornando-o mais fácil de... Leia mais