Tengo problemas para aplicar un estilo que es !important. He intentado:

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

Esto no hace nada ; no se aplica ningún estilo de ancho. ¿Existe una forma jQuery-ish de aplicar dicho estilo sin tener que sobrescribir cssText(lo que significaría que primero debería analizarlo, etc.)?

Editar : debo agregar que tengo una hoja de estilo con un !importantestilo que estoy tratando de anular con un !importantestilo en línea, por lo que usar .width()y similares no funciona, ya que mi !importantestilo externo lo anula .

Además, se calcula el valor que anulará el valor anterior , por lo que no puedo simplemente crear otro estilo externo.

El problema se debe a que jQuery no comprende el !importantatributo y, como tal, no aplica la regla.

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

.importantRule { width: 100px !important; }

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

O al usar attr():

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

Sin embargo, este último enfoque desarmarí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 / más sabio.

El attr()enfoque anterior se modificó ligeramente para preservar la stylecadena / propiedades originales y se modificó según lo sugerido por falko en un comentario:

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

Creo que he encontrado una solución real. Lo convertí en una nueva función:

jQuery.style(name, value, priority);

Puede usarlo para obtener valores con .style('name')igual .css('name'), obtener CSSStyleDeclaration con .style(), y también establecer valores, con la capacidad de especificar la prioridad como 'importante'. Mira esto .

Manifestación

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

Aquí está la salida:

null
red
blue
important

La función

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

Consulte esto para ver ejemplos de cómo leer y establecer los valores CSS. Mi problema era que ya había establecido !importantel ancho en mi CSS para evitar conflictos con otro CSS de tema, pero los cambios que hice en el ancho en jQuery no se verían afectados ya que se agregarían al atributo de estilo.

Compatibilidad

Para configurar con la prioridad usando la setPropertyfunción, este artículo dice que hay soporte para IE 9+ y todos los demás navegadores. He intentado con IE 8 y ha fallado, por lo que desarrollé soporte para él en mis funciones (ver arriba). Funcionará en todos los demás navegadores que usan setProperty, pero necesitará mi código personalizado para funcionar en <IE 9.

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

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

Actualizado para comentarios: también tiene esta opción, pero reemplazará todos los CSS en el elemento, así que no estoy seguro de que sea más viable:

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

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

Nota: el uso de Chrome puede devolver un error como:

elem [0] .style.removeAttribute no es una función

Cambiar la línea para usar la .removePropertyfunción, como para elem[0].style.removeProperty('width');solucionar el problema.

La respuesta de David Thomas describe una forma de uso $('#elem').attr('style', …), pero advierte que su uso eliminará los estilos previamente establecidos en el styleatributo. 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 una demostración de JS Bin .

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

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

Sin embargo, esto no funciona en IE 8 y versiones inferiores.

Puedes hacerlo:

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

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

Puede lograr esto de dos maneras:

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

No es necesario ir a la complejidad de la respuesta de @ AramKocharyan, ni la necesidad de insertar dinámicamente ninguna etiqueta de estilo.

Simplemente sobrescribe 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 !importantreglas 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 vainilla 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 se trata de un elemento que lo es #elem, puede cambiar su identificación a otra y darle el estilo que desee ...

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

Y en tu CSS:

#cheaterId { width: 100px;}

En lugar de usar la css()función, pruebe la addClass()función:

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

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

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

Por ejemplo:

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

Y en tu archivo CSS:

.importantClass {
    width: 100px !important;
}

Para su información, no funciona porque jQuery no lo admite. Hubo un ticket archivado en 2012 ( # 11173 $ (elem) .css ("propiedad", "valor! Importante") falla ) que finalmente se cerró como WONTFIX.

La mayoría de estas respuestas ahora están desactualizadas, el soporte de IE7 no es un problema.

La mejor manera de hacer esto que sea compatible con IE11 + y todos los navegadores modernos es:

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

O si lo desea, puede crear un pequeño complemento jQuery que haga esto. Este complemento coincide estrechamente con el css()método propio de jQuery en los parámetros que admite:

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

Ejemplo jsfiddle aquí .

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 agregar estilo en la cabeza:

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

Esto agrega 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

nodo var = $ ('. selector') [0];
O
var nodo = document.querySelector ('. selector');

Establecer CSS

node.style.setProperty ('ancho', '100px', 'importante');

Eliminar CSS

node.style.removeProperty ('ancho');
O
node.style.width = '';

Creo que funciona bien y puede sobrescribir cualquier otro CSS antes (esto: elemento DOM):

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

Hazlo asi:

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

Esta solución dejará todos los javascript calculados y agregará la etiqueta importante al elemento: puede hacerlo (Ej. 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

Tres ejemplos de trabajo

Tuve una situación similar, pero usé .find () después de luchar con .closest () 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'});

Trabajo: http://jsfiddle.net/fx4mbp6c/

Puede o no ser apropiado para su situación, pero puede utilizar selectores CSS para muchos de estos tipos de situaciones.

Si, por ejemplo, desea que las instancias tercera y sexta de .cssText tengan un ancho diferente, 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;}

Supongo que lo intentaste sin agregar !important?

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

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

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

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

También descubrí que ciertos elementos o complementos (como Bootstrap) tienen algunos casos de clase especiales en los que no funcionan bien !importantu otras soluciones como.addClass/.removeClass , por lo que debe / desactivarlos.

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

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

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

Tuve el mismo problema al tratar de cambiar el color del 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 utilizando el método addClass de la siguiente manera:

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

Problema resuelto.

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

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

Un enfoque alternativo es crear y actualizar dinámicamente la clase CSS en JavaScript. Para hacer eso, podemos usar el elemento de estilo y necesitamos emplear la ID para el elemento de estilo para que podamos 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)