Pregunta Cómo aplicar! Importante usando .css ()?


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

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

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

Editar: Debo añadir que tengo una hoja de estilo con !important estilo que estoy tratando de anular con un !important estilo en línea, entonces usando .width() y similares no funciona, ya que se ve anulado por mi externo !important estilo.

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


631
2018-04-16 20:31


origen


Respuestas:


Creo que encontré una solución real. Lo he convertido en una nueva función:

jQuery.style(name, value, priority);

Puedes usarlo para obtener valores con .style('name') al igual que .css('name'), obtén la declaración CSSStyle con .style()y también establecer valores, con la capacidad de especificar la prioridad como "importante". Ver esta.

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á el resultado:

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

Ver esta para ejemplos de cómo leer y establecer los valores de CSS. Mi problema era que ya había establecido !important por el ancho en mi CSS para evitar conflictos con el CSS de otro tema, pero cualquier cambio que haga en el ancho en jQuery no se vería afectado ya que se agregarían al atributo de estilo.

Compatibilidad

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


296
2018-01-17 12:23



El problema se debe a que jQuery no entiende la !important atributo, 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 desarmaría cualquier regla de estilo en línea previamente establecida. Entonces use con cuidado.

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

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

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

526
2018-04-16 20:40



Puede establecer el ancho directamente usando .width() Me gusta esto:

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

Actualizado para comentarios: También tiene esta opción, pero reemplazará todas las CSS del elemento, por lo que no está seguro de que sea más viable:

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

136
2018-04-16 20:32



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

63
2017-09-13 18:18



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


51
2017-07-30 14:24



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 anteriores.


27
2017-08-02 23:33



Puedes hacerlo:

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

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


22
2017-09-13 01:20



Puedes lograr esto de dos maneras:

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

17
2017-07-09 11:13



No es necesario ir a la complejidad de la respuesta de @ AramKocharyan, ni a 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 puede usar removeProperty()porque no eliminará !important reglas en Chrome.
No puede usar element.style[property] = '', porque solo acepta camelCase en Firefox.

Probablemente puedas hacer esto más corto con jQuery, pero esta función de vanilla se ejecutará en navegadores modernos, Internet Explorer 8, etc.


14
2017-10-04 00:56



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

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

12
2018-05-15 08:54



Esta solución no anula ninguno de los estilos anteriores, simplemente 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);
}

9
2017-10-08 17:12