Estou tentando aplicar um estilo ao meu elemento e definir a importância dele, desta maneira:
$('div').css('height','50px!important');
Porém, não funciona, qual seria a maneira correta?
Não está funcionando pois o Jquery não reconhece a declaração !important. De maneira simples, você pode fazer dessa forma:
$('div').attr('style', 'width: 50px!important');
Isso deve solucionar, porém ira sobrescrever os estilos anteriores que estiverem setados. Para que isso não ocorra, isso ira manter os estilos anteriores e adicionar novos:
$('#elem').attr('style', function(i,s) { return s + 'width: 100px !important;' });
A melhor maneira de aplicar regras de CSS é sempre usando classes.
Assim o melhor é defenir no CSS uma classe
.minhaClasse {
width: 50px!important
}
e adicionar a classe com:
$('#elem').addClass('minhaClasse');
Para além dessa maneira ideal, e tendo em conta que jQuery é javascript pode ser melhor, neste caso usar o style e nomeadamente o setProperty que tem um parametro para a importância.
Assim, poderia usar:
$('#elem')[0].style.setProperty('width', '50px', 'important');
ou
document.getElementById('elem').style.setProperty('width', '50px', 'important');
setProperty
, acho que poucos programadores se lembram desse terceiro parâmetro -- que, alias é cross-browser. Fica a pergunta "Por que .prop não oferece esse flag?"
Commented
2/02/2014 às 21:32
Você pode usar desta forma:
$(".prodMenor:eq(6)").css("cssText", "margin-right: 0 !important");
Cuidado: neste caso você precisa setar todas as propriedades desejadas.
Veja mais em http://bugs.jquery.com/ticket/2066 (en)
Se quiser uma função para aplicar o !important
separadamente, tem uma aqui.
Acabei de criar uma função que faz exatamente o que a pergunta pede:
// jquery-css-important.js v1
jQuery.fn.extend({
cssImportant: function(key, val) {
let $div = $('<div>');
$div.css(key, val);
let style = $div.attr('style');
$div.remove();
let $this = $(this);
if (style) {
$this.css(key, val);
let oldStyle = $this.attr('style');
$this.attr('style', oldStyle.replace(style, style.replace(';', '!important;')));
};
return $this;
}
});
As outras respostas não contemplam exatamente o que foi pedido. O uso de classes é o melhor dos mundos porque é o jeito certo, mas não resolve todos os casos como, por exemplo, um item já ter !important dentro do style. Usar attr é ruim porque mexe no atributo inteiro o que significa descartar outras propriedades. Adicionar no fim do atributo style também é ruim pois sem uma verificação via expressão regular ou algo parecido você pode acabar com duas propriedades iguais poluindo o código:
<div style="width: 100px; width: 110px!important;"></div>
O meu código utiliza o próprio jQuery para verificar se há duplicações de css no atributo style e então incrementa com !important. Desta maneira o uso é tão simples quanto o $.css normal e o resto do código continua funcionando normalmente.
O uso é simples:
$('div').cssImportant('margin', '10px');
Não fiz suporte para objetos então para adicionar mais de um item é necessário mais de uma linha.
!important
se você está manipulando o elemento diretamente, pois o estilo do próprio elemento tem precedência sobre as outras definições.