El problema se debe a que jQuery no entiende el atributo !important y, como tal, no puede aplicar la regla.

Es posible que pueda solucionar ese problema y aplicar la regla refiriéndose a él, a través de addClass():

.importantRule { width: 100px !important; }

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

O usando attr():

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

Sin embargo, este último enfoque eliminaría cualquier regla de estilo en línea previamente establecida. Así que úsalo con cuidado.

Por supuesto, hay un buen argumento de que el método de @Nick Craver es más fácil/sabio.

Lo anterior, attr() enfoque modificado ligeramente para preservar la cadena/propiedades original style:

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

Puede establecer el ancho directamente usando .width() así:

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

Actualizado para comentarios: También tienes esta opción, pero reemplazará todo css en el elemento, así que no estoy seguro de que sea más viable:

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

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

La respuesta de David Thomas describe una forma de usar $('#elem').attr('style', …), pero advierte que usarlo eliminará estilos previamente establecidos en el atributo style. Aquí hay una forma de usar attr() sin ese problema:

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

Como una función:

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

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

Aquí hay un JS Bin demo.

Después de leer otras respuestas y experimentar, esto es lo que funciona para mí:

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

Esto no funciona en IE 8 y bajo, sin embargo.

Puedes hacer esto:

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

Usando "cssText" como el nombre de la propiedad y lo que quieras agregar al CSS como su valor.

Puedes lograr esto de dos maneras:

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

No hay necesidad de ir a la complejidad de la respuesta de @AramKocharyan, ni la necesidad de insertar etiquetas de estilo dinámicamente.

Simplemente sobrescribir el estilo, pero no tienes que analizar nada, ¿por qué lo harías?

// 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' : '') + ';');
}

_{No se puede usar removeProperty(), porque no eliminará las reglas !important en Chrome.
No se puede usar element.style[property] = '', porque solo acepta camelCase en Firefox.}

Probablemente podría acortar esto con jQuery, pero esta función vanilla se ejecutará en navegadores modernos, Internet Explorer 8, etc.

Esto es lo que hice después de encontrar este problema...

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

Esta solución no anula ninguno de los estilos anteriores, solo aplica el que necesita:

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

Si no es tan relevante y ya que está tratando con un elemento que es #elem, puede cambiar su id a otra cosa y darle el estilo que desee...

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

Y en tu CSS:

#cheaterId { width: 100px;}

La solución más fácil y mejor para este problema de mi parte fue simplemente usar addClass() en lugar de .css () or .attr().

Por ejemplo:

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

Y en tu archivo CSS:

.importantClass {
    width: 100px !important;
}

En lugar de usar la función css() intente con la función addClass():

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

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

Para tu información, no funciona porque jQuery no lo soporta. Había una multa presentada en 2012 (#11173 $(elem).css("propiedad", "valor !importante") falla ) que finalmente se cerró como WONTFIX.

Primero necesitamos eliminar el estilo anterior. Lo elimino usando una expresión regular. Aquí hay un ejemplo para cambiar de color:

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

Una forma alternativa de añadir estilo en head:

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

Esto añade estilo después de todos sus archivos CSS por lo que tendrá mayor prioridad que otros archivos CSS y se aplicará.

Puede ser que se vea así:

Cache

var node = $('.selector')[0];
OR
var node = document.querySelector('.selector');

Establecer CSS

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

Eliminar CSS

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

Asumiría que lo probaste sin agregar !important?

El CSS en línea (que es como JavaScript agrega estilo) anula el CSS de la hoja de estilos. Estoy bastante seguro de que ese es el caso incluso cuando la regla CSS de la hoja de estilos tiene !important.

Otra pregunta (tal vez una pregunta estúpida, pero debe hacerse.): ¿Es el elemento en el que estás tratando de trabajar display:block; o display:inline-block;?

No conoce su experiencia en CSS... los elementos en línea no siempre se comportan como cabría esperar.

Hazlo así:

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

Puede o no ser apropiado para su situación, pero puede usar selectores CSS para muchas de este tipo de situaciones.

Si, por ejemplo, quería de la 3a y 6a instancias de .cssText para tener un ancho diferente se puede escribir:

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

O:

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

Creo que funciona bien y puede sobrescribir cualquier otro CSS anterior (este elemento: DOM):

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

También descubrí que ciertos elementos o complementos (como Bootstrap) tienen algunos casos de clases especiales donde no juegan bien con !important u otras soluciones como .addClass/.removeClass, y por lo tanto tienes que activarlos/desactivarlos.

Por ejemplo, si usas algo como <table class="table-hover"> la única manera de modificar con éxito elementos como colores de filas es activar/desactivar la clase table-hover, de esta manera

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

¡Esperemos que esta solución sea útil para alguien! :)

Podemos usar setProperty o cssText para agregar !important a un elemento DOM usando JavaScript.

Ejemplo 1:

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

Ejemplo 2:

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

Tuve el mismo problema al intentar cambiar un color de texto de un elemento de menú cuando "evento". La mejor manera que encontré cuando tuve este mismo problema fue:

Primer paso: Cree, en su CSS, una nueva clase con este propósito, por ejemplo:

.colorw{ color: white !important;}

Último paso: Aplique esta clase usando el método addClass de la siguiente manera:

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

Problema resuelto.

Tres ejemplos de trabajo

Tuve una situación similar, pero usé .find () después de luchar con .más cercano () durante mucho tiempo con muchas variaciones.

El Código de Ejemplo

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

Trabajando: http://jsfiddle.net/fx4mbp6c /

Esta solución dejará todo el javascript computado y agregará la etiqueta importante en el elemento: Puede hacer (por ejemplo, si necesita establecer el ancho con la etiqueta 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

Https://jsfiddle.net/xk6Ut/256 /

Un enfoque alternativo es crear y actualizar dinámicamente la clase CSS en JavaScript. Para ello, podemos utilizar el elemento style y necesitamos emplear el ID del elemento style para poder actualizar la clase 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)

La solución más segura para esto es agregar una clase y luego hacer la magia en CSS :-), addClass() y removeClass() deberían hacer el trabajo.

Otro método fácil para resolver este problema añadiendo el atributo style:

$('.selector').attr('style', 'width:500px !important');