如何申请！使用.css（）重要？
我很难应用一种!important的风格。 我试过了：
$("#elem").css("width", "100px !important");
这什么都不做 ; 任何宽度的风格都不适用。 是否有一种应用这种风格而不必覆盖cssText （这意味着我需要先解析它，等等）的jQuery-ish方式？
编辑 ：我应该补充一点，我有一个带有!important样式的样式表，我尝试用!important样式内联来覆盖，所以使用.width()等不起作用，因为它被我的外部!important样式覆盖。
此外，将覆盖以前的值的值的计算 ，所以我不能简单地创建另一个外部风格。
我想我找到了一个真正的解决方案。 我已经把它变成了一个新的功能：
jQuery.style(name, value, priority);
你可以用它来获取值.style('name')一样.css('name')获得与CSSStyleDeclaration上.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值的示例，请参阅此处。 我的问题是，我已经设置了!important对CSS中的宽度!important ，以避免与其他主题CSS发生冲突，但是我对jQuery宽度所做的任何更改都不会受到影响，因为它们会被添加到style属性中。
兼容性
为了使用setProperty函数设置优先级，本文称支持IE 9+和所有其他浏览器。 我试过用IE8，但它失败了，这就是为什么我在我的函数中构建了对它的支持（参见上文）。 它可以在使用setProperty的所有其他浏览器上工作，但它需要我的自定义代码才能在<IE 9中工作。
这个问题是由jQuery不理解!important属性造成的，因此不能应用规则。
您可能可以解决该问题，并通过addClass()引用该规则来应用规则：
.importantRule { width: 100px !important; }
$('#elem').addClass('importantRule');
或者通过使用attr() ：
$('#elem').attr('style', 'width: 100px !important');
不过，后一种方法将取消任何先前设置的内嵌式样式规则。 所以请小心使用。
当然，有一个很好的论点是@Nick Craver的方法更简单/更明智。
上面， attr()方法略微修改以保留原始style字符串/属性：
$('#elem').attr('style', function(i,s) { return s + 'width: 100px !important;' });
您可以使用.width()直接设置宽度，如下所示：
$("#elem").width(100);
更新评论：你也有这个选项，但它会替换元素上的所有CSS，所以不确定它是否更可行：
$('#elem').css('cssText', 'width: 100px !important');