¿Cómo aplicar! Importante usando .css()?
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 de aplicar ese estilo sin tener que sobrescribirlo cssText(lo que significaría que tendría que analizarlo primero, 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 estilo externo lo anula !important.
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 haciendo referencia a ella 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 anularía cualquier regla de estilo en línea establecida previamente. Así que úselo con cuidado.
Por supuesto, hay un buen argumento de que el método de @Nick Craver es más fácil/más inteligente.
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. Lo convertí en una nueva función:
jQuery.style(name, value, priority);
Puede usarlo para obtener valores con .style('name')me gusta .css('name'), obtener CSSStyleDeclarationcon .style()y también establecer valores, con la capacidad de especificar la prioridad como "importante" . Mira esto .
Ejemplo
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'));
Salida de ejemplo:
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 configurar los valores CSS. Mi problema era que ya había configurado !importantel ancho en mi CSS para evitar conflictos con otros temas CSS, pero cualquier cambio que hiciera al ancho en jQuery no se vería afectado ya que se agregaría al atributo de estilo.
Compatibilidad
Para configurar la prioridad usando la setPropertyfunción, este artículo dice que hay soporte para IE 9+ y todos los demás navegadores. Lo intenté con IE 8 y falló, por eso creé soporte para él en mis funciones (ver arriba). Funcionará en todos los demás navegadores que utilicen setProperty, pero necesitará mi código personalizado para funcionar en <IE 9.
