如何使用.css（）申请！important？

该问题是由于jQuery不理解该属性，因此无法应用该规则引起的。!important

您也许能够变通解决此问题，并通过引用它来应用该规则，方法是：addClass()

.importantRule { width: 100px !important; }

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

或者通过使用 ：attr()

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

但是，后一种方法将取消设置任何以前设置的内联样式规则。因此，请谨慎使用。

当然，有一个很好的论点认为，@Nick Craver的方法更容易/更明智。

上面的方法稍作修改以保留原始字符串/属性，并按照falko在注释中的建议进行修改：attr()style

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

我想我已经找到了解决方案。我把它变成了一个新的函数：

jQuery.style(name, value, priority);

您可以使用它来获取与 like 这样的值，获取 CSSStyleDeclaration with ，还可以设置值，并能够将优先级指定为“important”。请参阅此内容。.style('name').css('name').style()

例

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

输出示例：

null
red
blue
important

功能

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

有关如何读取和设置 CSS 值的示例，请参阅此处。我的问题是我已经在CSS中设置了宽度以避免与其他主题CSS冲突，但是我在jQuery中对宽度所做的任何更改都不会受到影响，因为它们将被添加到style属性中。!important

兼容性

对于使用setProperty函数进行优先级设置，本文说支持IE 9 +和所有其他浏览器。我尝试过IE 8，但它失败了，这就是为什么我在函数中构建了对它的支持（见上文）。它将在所有其他使用 的浏览器上运行，但它需要我的自定义代码才能在 IE 9 <工作。setProperty