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 a Linguagem ELIXIR no Linux.

Como instalar a Linguagem ELIXIR no Linux.

Elixir é uma linguagem de programação dinâmica e funcional, desenvolvida por José Valim em 2011, projetada para construir aplicações escaláveis... Leia mais

Instalando e Gerenciando o SQLite no Linux

Instalando e Gerenciando o SQLite no Linux

Introdução ao SQLite O SQLite é um sistema de banco de dados leve, sem servidor e autocontido, amplamente utilizado em... 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

Guia de Deploy de Aplicação Laravel com Apache em uma VPS com Ubuntu e HTTPS

Guia de Deploy de Aplicação Laravel com Apache em uma VPS com Ubuntu e HTTPS

Neste guia, você aprenderá a fazer o deploy de uma aplicação Laravel em uma VPS rodando Ubuntu com o servidor... Leia mais