如何使用. css（）应用！important？

!important样式时遇到了麻烦。我试过了：

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

这什么都不做; 不会应用任何宽度样式。有没有一种类似 jQuery 的方式来应用这种样式，而不必覆盖cssText （这意味着我需要首先对其进行解析，等等）？

编辑：我应该补充一点，我有一个样式表，其中的一个!important样式我试图用!important样式内联.width()之类的方法不起作用，因为它被我的外部!important样式覆盖。

此外，将覆盖以前的值的值的计算，所以我不能简单地创建另一个外部风格。

答案

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

您可能可以解决该问题，并通过addClass()引用它来应用规则：

.importantRule { width: 100px !important; }

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

或使用attr() ：

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

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

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

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

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

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

jQuery.style(name, value, priority);

您可以使用它来获取.style('name')值，就像.css('name') ，使用.style() CSSStyleDeclaration并设置值，并且可以将优先级指定为“重要” 。看到这个。

例子

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 值的例子。我的问题是我已经!important以避免与其他主题 CSS 发生冲突，但是我对 jQuery 中的宽度所做的任何更改都不会受到影响，因为它们将被添加到 style 属性中。

兼容性

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

.width()直接设置宽度，如下所示：

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

更新为注释：您也具有此选项，但是它将替换元素上的所有 css，因此不确定它是否更可行：

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