Como Remover Propriedade de CSS com JavaScript

Neste artigo você vai aprender a como remover propriedade de CSS com JavaScript, vem conferir como fazer isso!

Fala programador(a), beleza? Bora aprender mais sobre JavaScript e CSS!

Introdução

Durante o desenvolvimento de aplicações web, é comum que os desenvolvedores precisem manipular estilos CSS de elementos do DOM diretamente usando JavaScript.

Uma tarefa frequente é remover uma propriedade de CSS específica de um elemento.

Neste artigo, exploraremos diferentes maneiras de remover propriedade de CSS com JavaScript e discutir suas vantagens e desvantagens.

Remover propriedade de CSS usando a função style.removeProperty

Uma das maneiras mais diretas de remover propriedade de CSS com JavaScript é usar a função style.removeProperty disponível no objeto style de um elemento DOM.

Essa função aceita um único argumento, que é o nome da propriedade CSS que você deseja remover.

Exemplo:

const elemento = document.getElementById('meu-elemento');
elemento.style.removeProperty('background-color');

Neste exemplo, a propriedade background-color do elemento com o ID meu-elemento é removida usando a função style.removeProperty.

Remover propriedade de CSS usando atribuição de valor vazio

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Outra maneira de remover propriedade de CSS com JavaScript é atribuindo um valor vazio à propriedade específica no objeto style do elemento DOM.

Exemplo:

const elemento = document.getElementById('meu-elemento');
elemento.style.backgroundColor = '';

Neste exemplo, a propriedade background-color do elemento com o ID meu-elemento é removida atribuindo um valor vazio à propriedade style.backgroundColor.

Remover propriedade de CSS usando a função removeAttribute

Embora não seja a abordagem mais recomendada para remover propriedades de CSS específicas, é possível usar a função removeAttribute para remover o atributo style inteiro de um elemento DOM.

Isso removerá todas as propriedades de estilo inline do elemento, portanto, use com cautela.

Exemplo:

const elemento = document.getElementById('meu-elemento');
elemento.removeAttribute('style');

Neste exemplo, o atributo style inteiro é removido do elemento com o ID meu-elemento, resultando na remoção de todas as propriedades de estilo inline do elemento.

Quer aprender mais sobre React? Confira o vídeo abaixo:

Conclusão

Remover propriedade de CSS com JavaScript é uma tarefa comum no desenvolvimento de aplicações web e pode ser alcançada de várias maneiras.

Neste artigo, exploramos três abordagens para remover propriedades de CSS de elementos DOM: usando a função style.removeProperty, atribuindo um valor vazio à propriedade específica e usando a função removeAttribute para remover o atributo style inteiro.

Cada abordagem tem suas vantagens e desvantagens, e a escolha do método mais adequado dependerá das necessidades específicas do seu projeto e das práticas de codificação adotadas.

Ao seguir as orientações apresentadas neste artigo, você estará melhor preparado para manipular estilos CSS de elementos do DOM usando JavaScript de maneira eficaz e segura.

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Nosso principal objetivo é tornar você um dev no menor tempo possível, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Removi a propriedade e o elemento continua estilizado, por quê?

Essa é a pegadinha que mais pega gente nova nisso

O objeto style de um elemento representa só o estilo inline, aquele que mora no atributo style da própria tag

Então quando tu roda o removeProperty, tu apaga o inline e o elemento simplesmente volta a obedecer o que vem da folha de estilo

Se existe uma regra num arquivo .css apontando pra aquele elemento, ela continua valendo e o visual não muda nadinha

Faça o teste! remove a propriedade e olha o atributo style do elemento no inspetor do navegador

Se o atributo sumiu e a cor continua lá, a origem do estilo não era o inline, era a folha de estilo

Nesses casos o caminho não é mexer no style inline, e sim tirar do elemento a classe que aplica aquele estilo 🙂

background-color ou backgroundColor?

Repara nos dois exemplos que o nome da propriedade aparece escrito de dois jeitos diferentes

Na função removeProperty tu passa o nome como string, no mesmo formato que tu escreve no CSS, com hífen: ‘background-color’

Já na atribuição de valor vazio tu acessa a propriedade dentro do objeto style, e aí vale o formato camelCase do JavaScript: backgroundColor

Tome cuidado! misturar os dois formatos é o erro mais silencioso dessa tarefa, e o resultado é tu ficar encarando o elemento sem entender por que o estilo continua ali

Regra de bolso pra não errar: nome entre aspas vai com hífen, propriedade depois do ponto vai em camelCase

Como remover várias propriedades de uma vez?

Quando a lista cresce, repetir a mesma linha três, quatro vezes fica feio pra caramba

Junta os nomes num array e passa um por um pra mesma função

const elemento = document.getElementById('meu-elemento')

propriedades.forEach(propriedade => elemento.style.removeProperty(propriedade))

Assim tu mantém o controle propriedade por propriedade e não precisa apelar pro removeAttribute, que levaria junto tudo que tu queria manter

E olha que legal: pra adicionar mais uma propriedade na limpeza, tu só mexe no array 😀

Qual método usar em cada caso:

Os três caminhos não fazem a mesma coisa, então a escolha não é gosto, é escopo

style.removeProperty: quando tu sabe exatamente qual propriedade quer tirar e quer manter o resto do estilo inline intacto

É a opção mais explícita e a que deixa a intenção clara pra quem for ler teu código depois

Atribuição de valor vazio: mesmo escopo de uma propriedade só, com sintaxe mais curta

Encaixa bem quando tu já está mexendo em várias propriedades pelo objeto style ali por perto

removeAttribute(‘style’): escopo de bomba, some com o atributo style inteiro e leva todas as propriedades inline junto

Serve pra resetar o elemento de uma vez, não pra cirurgia

Resumindo: precisa de bisturi, vai de removeProperty ou valor vazio, precisa zerar tudo, aí sim o removeAttribute

E se eu estiver usando React, Vue ou Angular?

Aqui muda o jogo, e vale o aviso

Essas bibliotecas trabalham de forma declarativa: tu descreve como a tela deve estar e elas cuidam de mexer no DOM por você

Quando tu vai lá na mão e apaga um estilo inline direto no elemento, tu está brigando com esse ciclo, e na próxima renderização o estilo pode voltar do jeitinho que estava

É como arrumar a mesa enquanto outra pessoa está montando ela

O caminho por lá é mudar o estado que descreve aquele estilo, e deixar a biblioteca aplicar a mudança

As técnicas desse artigo continuam valendo pra JavaScript puro e pra manipulação pontual de elementos que não são controlados por essas bibliotecas

Perguntas frequentes

Qual a diferença entre removeProperty e atribuir valor vazio?

As duas agem no estilo inline de uma propriedade só

A diferença prática está na escrita: o removeProperty recebe o nome como string, no formato do CSS, e a atribuição usa a propriedade em camelCase dentro do objeto style

Usar removeAttribute(‘style’) é errado?

Errado não, largo demais na maioria das vezes

Ele apaga o atributo style inteiro, então só use quando a intenção for zerar todo o estilo inline daquele elemento

Como remover um estilo que veio de um arquivo CSS?

Não dá pela via do style inline

Se a regra vem da folha de estilo, o jeito é tirar do elemento a classe que aplica aquele estilo

Como eu confirmo que a propriedade foi removida mesmo?

Abre o inspetor do navegador e olha o atributo style do elemento

Se a propriedade sumiu de lá e o visual continua igual, é sinal de que o estilo estava vindo de outro lugar