34

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?

8
  • 4
    Acho que não deveria ser necessário usar o !important se você está manipulando o elemento diretamente, pois o estilo do próprio elemento tem precedência sobre as outras definições.
    – elias
    Commented 7/01/2014 às 15:40
  • Claro, mas e se caso você queria sobrescrever uma atribuição que já esteja em uma folha de estilo padrão? Commented 7/01/2014 às 15:48
  • caso exista uma regra em uma folha de estilo que ja tenha o !important isso é útil, porém é uma boa observação... Commented 7/01/2014 às 15:48
  • 1
    Se existe uma regra em um arquivo css que já tenha uma propriedade com o !important, então o que eu determinar no atributo style do elemento, não irá sobrescrever, por isso nele tem que ter o !important também, simples assim... Commented 7/01/2014 às 15:57
  • 2

5 Respostas 5

18

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;' });
15

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');

Exemplo

1
  • 1
    Apesar do Denis ter respondido "com mais jQuery", gostei da dica Javascript do 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
10

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.

4

Você pode usar a função .attr() do jQuery:

$('.prodMenor:eq(6)').attr('style','margin-right: 0 !important');

Exemplo: FIDDLE

1
0

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.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .