Estou tendo problemas para aplicar um estilo que seja !important. Eu tentei:

$("#elem").css("width", "100px !important");

Isso não faz nada ; nenhum estilo de largura é aplicado. Existe uma maneira jQuery-ish de aplicar esse estilo sem precisar sobrescrever cssText(o que significaria que eu precisaria analisá-lo primeiro etc.)?

Editar : devo acrescentar que tenho uma folha de estilo com um !importantestilo que estou tentando substituir por um !importantestilo embutido, portanto, o uso .width()e similares não funcionam, pois são substituídos pelo meu !importantestilo externo .

Além disso, o valor que substituirá o valor anterior é calculado , portanto não posso simplesmente criar outro estilo externo.

O problema é causado pelo jQuery não entender o !importantatributo e, como tal, falha ao aplicar a regra.

Você pode solucionar esse problema e aplicar a regra consultando-a através de addClass():

.importantRule { width: 100px !important; }

$('#elem').addClass('importantRule');

Ou usando attr():

$('#elem').attr('style', 'width: 100px !important');

A última abordagem desabilitaria as regras de estilo em linha definidas anteriormente. Portanto, use com cuidado.

Claro, há um bom argumento de que o método de @Nick Craver é mais fácil / mais sábio.

A attr()abordagem acima foi modificada levemente para preservar a stylecadeia / propriedades originais e modificada conforme sugerido por falko em um comentário:

$('#elem').attr('style', function(i,s) { return (s || '') + 'width: 100px !important;' });

Eu acho que encontrei uma solução real. Eu fiz isso em uma nova função:

jQuery.style(name, value, priority);

Você pode usá-lo para obter valores .style('name')como .css('name'), obter CSSStyleDeclaration .style()e também definir valores - com a capacidade de especificar a prioridade como 'importante'. Veja isso .

Demo

var div = $('someDiv');
console.log(div.style('color'));
div.style('color', 'red');
console.log(div.style('color'));
div.style('color', 'blue', 'important');
console.log(div.style('color'));
console.log(div.style().getPropertyPriority('color'));

Aqui está a saída:

null
red
blue
important

A função

(function($) {    
  if ($.fn.style) {
    return;
  }

  // Escape regex chars with \
  var escape = function(text) {
    return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
  };

  // For those who need them (< IE 9), add support for CSS functions
  var isStyleFuncSupported = !!CSSStyleDeclaration.prototype.getPropertyValue;
  if (!isStyleFuncSupported) {
    CSSStyleDeclaration.prototype.getPropertyValue = function(a) {
      return this.getAttribute(a);
    };
    CSSStyleDeclaration.prototype.setProperty = function(styleName, value, priority) {
      this.setAttribute(styleName, value);
      var priority = typeof priority != 'undefined' ? priority : '';
      if (priority != '') {
        // Add priority manually
        var rule = new RegExp(escape(styleName) + '\\s*:\\s*' + escape(value) +
            '(\\s*;)?', 'gmi');
        this.cssText =
            this.cssText.replace(rule, styleName + ': ' + value + ' !' + priority + ';');
      }
    };
    CSSStyleDeclaration.prototype.removeProperty = function(a) {
      return this.removeAttribute(a);
    };
    CSSStyleDeclaration.prototype.getPropertyPriority = function(styleName) {
      var rule = new RegExp(escape(styleName) + '\\s*:\\s*[^\\s]*\\s*!important(\\s*;)?',
          'gmi');
      return rule.test(this.cssText) ? 'important' : '';
    }
  }

  // The style function
  $.fn.style = function(styleName, value, priority) {
    // DOM node
    var node = this.get(0);
    // Ensure we have a DOM node
    if (typeof node == 'undefined') {
      return this;
    }
    // CSSStyleDeclaration
    var style = this.get(0).style;
    // Getter/Setter
    if (typeof styleName != 'undefined') {
      if (typeof value != 'undefined') {
        // Set style property
        priority = typeof priority != 'undefined' ? priority : '';
        style.setProperty(styleName, value, priority);
        return this;
      } else {
        // Get style property
        return style.getPropertyValue(styleName);
      }
    } else {
      // Get CSSStyleDeclaration
      return style;
    }
  };
})(jQuery);

Veja isso para exemplos de como ler e definir os valores CSS. Meu problema foi que eu já havia definido !importanta largura do meu CSS para evitar conflitos com outro tema do CSS, mas quaisquer alterações feitas na largura do jQuery não seriam afetadas, pois seriam adicionadas ao atributo style.

Compatibilidade

Para definir com prioridade usando a setPropertyfunção, este artigo diz que há suporte para o IE 9+ e todos os outros navegadores. Eu tentei com o IE 8 e ele falhou, e é por isso que criei suporte para ele em minhas funções (veja acima). Ele funcionará em todos os outros navegadores usando setProperty, mas precisará do meu código personalizado para funcionar no <IE 9.

Você pode definir a largura diretamente usando o .width()seguinte:

$("#elem").width(100);

Atualizado para comentários: você também tem essa opção, mas ela substituirá todos os css no elemento, portanto, não tenha certeza se é mais viável:

$('#elem').css('cssText', 'width: 100px !important');

const elem = $("#elem");
elem[0].style.removeAttribute('width');
elem[0].style.setProperty('width', '100px', 'important');

Nota: O uso do Chrome pode retornar um erro como:

elem [0] .style.removeAttribute não é uma função

Alterando a linha para usar a .removePropertyfunção, como para elem[0].style.removeProperty('width');corrigir o problema.

A resposta de David Thomas descreve uma maneira de usar $('#elem').attr('style', …), mas alerta que o uso excluirá estilos definidos anteriormente no styleatributo. Aqui está uma maneira de usar attr()sem esse problema:

var $elem = $('#elem');
$elem.attr('style', $elem.attr('style') + '; ' + 'width: 100px !important');

Como uma função:

function addStyleAttribute($element, styleAttribute) {
    $element.attr('style', $element.attr('style') + '; ' + styleAttribute);
}

addStyleAttribute($('#elem'), 'width: 100px !important');

Aqui está uma demonstração do JS Bin .

Depois de ler outras respostas e experimentar, é isso que funciona para mim:

$(".selector")[0].style.setProperty( 'style', 'value', 'important' );

Isso não funciona no IE 8 e abaixo, no entanto.

Você consegue fazer isso:

$("#elem").css("cssText", "width: 100px !important;");

Usando "cssText" como o nome da propriedade e o que você deseja adicionar ao CSS como seu valor.

Você pode conseguir isso de duas maneiras:

$("#elem").prop("style", "width: 100px !important"); // this is not supported in chrome
$("#elem").attr("style", "width: 100px !important");

Não há necessidade de ir para a complexidade da resposta do @ AramKocharyan, nem a necessidade de inserir tags de estilo dinamicamente.

Basta substituir o estilo, mas você não precisa analisar nada, por que faria?

// Accepts the hyphenated versions (i.e. not 'cssFloat')
function addStyle(element, property, value, important) {
    // Remove previously defined property
    if (element.style.setProperty)
        element.style.setProperty(property, '');
    else
        element.style.setAttribute(property, '');

    // Insert the new style with all the old rules
    element.setAttribute('style', element.style.cssText +
        property + ':' + value + ((important) ? ' !important' : '') + ';');
}

_{Não é possível usar removeProperty(), porque não removerá !importantregras no Chrome.
Não é possível usar element.style[property] = '', porque ele aceita apenas camelCase no Firefox.}

Você provavelmente poderia diminuir isso com o jQuery, mas essa função básica será executada em navegadores modernos, no Internet Explorer 8, etc.

Aqui está o que eu fiz depois de encontrar esse problema ...

var origStyleContent = jQuery('#logo-example').attr('style');
jQuery('#logo-example').attr('style', origStyleContent + ';width:150px !important');

Esta solução não substitui nenhum dos estilos anteriores, apenas aplica o que você precisa:

var heightStyle = "height: 500px !important";
if ($("foo").attr('style')) {
  $("foo").attr('style', heightStyle + $("foo").attr('style').replace(/^height: [-,!,0-9,a-z, A-Z, ]*;/,''));
else {
  $("foo").attr('style', heightStyle);
}

Se não for tão relevante, e como você está lidando com um elemento que é #elem, você pode alterar o ID dele para outra coisa e estilizá-lo como desejar ...

$('#elem').attr('id', 'cheaterId');

E no seu CSS:

#cheaterId { width: 100px;}

Em vez de usar a css()função, tente a addClass()função:

  <script>
  $(document).ready(function() {
    $("#example").addClass("exampleClass");
  });
  </script>

  <style>
  .exampleClass{
    width:100% !important;
    height:100% !important;
  }
  </style>

A melhor e mais fácil solução para esse problema foi usar addClass () em vez de .css () ou .attr ().

Por exemplo:

$('#elem').addClass('importantClass');

E no seu arquivo CSS:

.importantClass {
    width: 100px !important;
}

Para sua informação, não funciona porque o jQuery não suporta. Houve um ticket arquivado em 2012 ( falha no # 11173 $ (elem) .css ("property", "value! Important") ) que acabou sendo fechado como WONTFIX.

A maioria dessas respostas agora está desatualizada, o suporte ao IE7 não é um problema.

A melhor maneira de fazer isso que suporta o IE11 + e todos os navegadores modernos é:

const $elem = $("#elem");
$elem[0].style.setProperty('width', '100px', 'important');

Ou, se desejar, você pode criar um pequeno plugin jQuery que faz isso. Este plug-in corresponde ao css()método do jQuery nos parâmetros que ele suporta:

/**
 * Sets a CSS style on the selected element(s) with !important priority.
 * This supports camelCased CSS style property names and calling with an object 
 * like the jQuery `css()` method. 
 * Unlike jQuery's css() this does NOT work as a getter.
 * 
 * @param {string|Object<string, string>} name
 * @param {string|undefined} value
 */   
jQuery.fn.cssImportant = function(name, value) {
  const $this = this;
  const applyStyles = (n, v) => {
    // Convert style name from camelCase to dashed-case.
    const dashedName = n.replace(/(.)([A-Z])(.)/g, (str, m1, upper, m2) => {
      return m1 + "-" + upper.toLowerCase() + m2;
    }); 
    // Loop over each element in the selector and set the styles.
    $this.each(function(){
      this.style.setProperty(dashedName, v, 'important');
    });
  };
  // If called with the first parameter that is an object,
  // Loop over the entries in the object and apply those styles. 
  if(jQuery.isPlainObject(name)){
    for(const [n, v] of Object.entries(name)){
       applyStyles(n, v);
    }
  } else {
    // Otherwise called with style name and value.
    applyStyles(name, value);
  }
  // This is required for making jQuery plugin calls chainable.
  return $this;
};

// Call the new plugin:
$('#elem').cssImportant('height', '100px');

// Call with an object and camelCased style names:
$('#another').cssImportant({backgroundColor: 'salmon', display: 'block'});

// Call on multiple items:
$('.item, #foo, #bar').cssImportant('color', 'red');

Exemplo de jsfiddle aqui .

Primeiro precisamos remover o estilo anterior. Eu o removo usando uma expressão regular. Aqui está um exemplo para mudar de cor:

var SetCssColorImportant = function (jDom, color) {
       var style = jDom.attr('style');
       style = style.replace(/color: .* !important;/g, '');
       jDom.css('cssText', 'color: ' + color + ' !important;' + style); }

Uma maneira alternativa de acrescentar estilo na cabeça:

$('head').append('<style> #elm{width:150px !important} </style>');

Isso acrescenta estilo a todos os seus arquivos CSS, para que ele tenha maior prioridade que outros arquivos CSS e seja aplicado.

Pode ser assim:

Cache

var node = $ ('. seletor') [0];
OU
var node = document.querySelector ('. seletor');

Definir CSS

node.style.setProperty ('width', '100px', 'important');

Remover CSS

node.style.removeProperty ('width');
OU
node.style.width = '';

Eu acho que funciona bem e pode substituir qualquer outro CSS antes (este: elemento DOM):

this.setAttribute('style', 'padding:2px !important');

Faça isso deste modo:

$("#elem").get(0).style.width= "100px!important";

Esta solução deixará todo o javascript calculado e adicionará a tag importante ao elemento: Você pode fazer (Ex, se precisar definir a largura com a tag importante)

$('exampleDiv').css('width', '');
//This will remove the width of the item
var styles = $('exampleDiv').attr('style');
//This will contain all styles in your item
//ex: height:auto; display:block;
styles += 'width: 200px !important;'
//This will add the width to the previous styles
//ex: height:auto; display:block; width: 200px !important;
$('exampleDiv').attr('style', styles);
//This will add all previous styles to your item

Três exemplos de trabalho

Eu tive uma situação semelhante, mas usei .find () depois de lutar com .closest () por um longo tempo com muitas variações.

O código de exemplo

// Allows contain functions to work, ignores case sensitivity

jQuery.expr[':'].contains = function(obj, index, meta, stack) {
    result = false;
    theList = meta[3].split("','");
    var contents = (obj.textContent || obj.innerText || jQuery(obj).text() || '')
    for (x=0; x<theList.length; x++) {
        if (contents.toLowerCase().indexOf(theList[x].toLowerCase()) >= 0) {
            return true;
        }
    }
    return false;
};

$(document).ready(function() {
    var refreshId = setInterval( function() {
        $("#out:contains('foo', 'test456')").find(".inner").css('width', '50px', 'important');
    }, 1000); // Rescans every 1000 ms
});

Alternativa

$('.inner').each(function () {
    this.style.setProperty('height', '50px', 'important');
});

$('#out').find('.inner').css({ 'height': '50px'});

Trabalho: http://jsfiddle.net/fx4mbp6c/

Pode ou não ser apropriado para sua situação, mas você pode usar seletores CSS para muitos desses tipos de situações.

Se, por exemplo, você deseja que a 3ª e a 6ª instâncias do .cssText tenham uma largura diferente, você pode escrever:

.cssText:nth-of-type(3), .cssText:nth-of-type(6) {width:100px !important;}

Ou:

.container:nth-of-type(3).cssText, .container:nth-of-type(6).cssText {width:100px !important;}

Eu diria que você tentou sem adicionar !important?

CSS embutido (que é como o JavaScript adiciona estilo) substitui o CSS da folha de estilo. Tenho certeza de que é esse o caso, mesmo quando a regra CSS da folha de estilo tem !important.

Outra pergunta (talvez uma pergunta estúpida, mas deve ser feita.): É o elemento em que você está tentando trabalhar display:block;ou display:inline-block;?

Não conhecendo sua experiência em CSS ... os elementos embutidos nem sempre se comportam como você esperaria.

Podemos usar setProperty ou cssText para adicionar !importanta um elemento DOM usando JavaScript.

Exemplo 1:

elem.style.setProperty ("color", "green", "important");

Exemplo 2:

elem.style.cssText='color: red !important;'

Também descobri que certos elementos ou complementos (como o Bootstrap) têm alguns casos especiais de classe em que eles não funcionam bem !importantou outras soluções alternativas .addClass/.removeClass, e, portanto, é necessário ativá-los / desativá-los.

Por exemplo, se você usar algo como <table class="table-hover">a única maneira de modificar com êxito elementos como cores de linhas é ativar table-hover/ desativar a classe, desta forma

$(your_element).closest("table").toggleClass("table-hover");

Espero que essa solução alternativa seja útil para alguém! :)

Eu tive o mesmo problema ao tentar alterar a cor do texto de um item de menu quando "evento". A melhor maneira que encontrei quando tive esse mesmo problema foi:

Primeira etapa: crie, em seu CSS, uma nova classe com esse objetivo, por exemplo:

.colorw{ color: white !important;}

Última etapa: aplique esta classe usando o método addClass da seguinte maneira:

$('.menu-item>a').addClass('colorw');

Problema resolvido.

A solução mais segura para isso é adicionar uma classe e fazer a mágica em CSS :-), addClass()e removeClass()deve fazer o trabalho.

https://jsfiddle.net/xk6Ut/256/

Uma abordagem alternativa é criar e atualizar dinamicamente a classe CSS em JavaScript. Para fazer isso, podemos usar o elemento style e precisamos empregar o ID para o elemento style, para que possamos atualizar a classe CSS

function writeStyles(styleName, cssText) {
    var styleElement = document.getElementById(styleName);
    if (styleElement) document.getElementsByTagName('head')[0].removeChild(
        styleElement);
    styleElement = document.createElement('style');
    styleElement.type = 'text/css';
    styleElement.id = styleName;
    styleElement.innerHTML = cssText;
    document.getElementsByTagName('head')[0].appendChild(styleElement);
}

...

  var cssText = '.testDIV{ height:' + height + 'px !important; }';
  writeStyles('styles_js', cssText)