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

De jQuery para Alpine.js: Um Guia Prático com Laravel e Componentes Reutilizáveis

De jQuery para Alpine.js: Um Guia Prático com Laravel e Componentes Reutilizáveis

Se você vem do jQuery e quer modernizar seus projetos com Alpine.js, esse tutorial é pra você. Vamos mostrar como... Leia mais

Como instalar o DBEAVEr via PPA no Ubuntu Linux e derivados.

Como instalar o DBEAVEr via PPA no Ubuntu Linux e derivados.

Vamos a mais um post HOW TO…. Abra o Terminal: Você pode fazer isso procurando por “Terminal” no menu de... 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 Executar Migrations e Seeders Específicas no Laravel

Como Executar Migrations e Seeders Específicas no Laravel

Para rodar uma migration específica no Laravel, você pode usar o comando migrate com a opção --path. Siga os passos... Leia mais