Como colocar CSS !important com JavaScript

Neste artigo você vai aprender a como colocar CSS !important com JavaScript, sobreescrevendo todas as outras regras do elemento

Fala programador(a), beleza? Bora aprender mais sobre alteração de DOM e propriedades de elemento com JavaScript!

Basicamente vamos criar uma função que aceita três argumentos:

• Elemento: o elemento alvo da regra;
• Propriedade: qual propriedade queremos alterar;
• Valor: qual o valor da propriedade adicionada anteriormente como argumento;

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

Desta maneira concatenamos a palavra !important ao valor, fazendo com que o estilo fique com esta regra a mais

Veja a função e sua utilização na prática:

function addImportant(el, prop, value) {
    el.setAttribute('style', `${el.style.cssText}
        ${prop} : ${value} !important;`);
}

const el = document.querySelector("#my-element");
const prop = "color";
const value = "red";

addImportant(el, prop, value)

Criamos a função addImportant recebendo os três argumentos comentados anteriormente

Utilizamos o método setAttribute para colocar uma regra de CSS, e veja que utilizamos a propriedade e valor que vem pelos argumentos da função

Depois chega a hora de utilizá-la, onde selecionamos um elementos através do DOM com o id de #my-element

E aplicamos cor vermelha ao texto dele, cor essa que já será aplicada com o !important

Resolvendo assim nosso problema de aplicar uma regra com !important ao elemento alvo com JS vanilla! 🙂

Note que o excesso de important não é indicado, pois pode dificultar a manutenção de CSS do seu código

Ou seja, a continuidade do desenvolvimento do projeto pode ser prejudicada, tome cuidado com isso!

Conclusão

Neste artigo você aprendeu a como colocar uma regra de CSS !important com JavaScript

Utilizamos uma função que nós mesmos criamos, que aceita: elemento, propriedade e valor

Esta função concatena o valor da propriedade ao !important e aplica ao elemento alvo

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!