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;
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!