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 Instalar e Acessar o PostgreSQL no WSL com DBeaver

Como Instalar e Acessar o PostgreSQL no WSL com DBeaver

PostgreSQL é um dos sistemas de gerenciamento de banco de dados mais populares, conhecido por sua robustez e recursos avançados.... Leia mais

Padrão de Projeto Strategy: Flexibilidade e Eficiência no Design de Software com PHP

Padrão de Projeto Strategy: Flexibilidade e Eficiência no Design de Software com PHP

Quando desenvolvemos software, é comum encontrar situações onde diferentes comportamentos precisam ser aplicados a objetos semelhantes. A abordagem tradicional de... Leia mais

Como Atualizar Valores de Chaves em Campos JSON no PostgreSQL

Como Atualizar Valores de Chaves em Campos JSON no PostgreSQL

Atualizar valores em um campo JSON no PostgreSQL é uma operação comum ao trabalhar com dados semi-estruturados. Isso é especialmente... Leia mais

Como atualizar multiplos registros com o método whereIn no Laravel 9 ?

Como atualizar multiplos registros com o método whereIn no Laravel 9 ?

O Laravel 9 é um framework PHP moderno e poderoso que oferece muitas ferramentas úteis para desenvolvedores web. Uma das... Leia mais