我在应用!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')like 的值.css('name')，获取CSSStyleDeclarationwith .style()，还可以设置值，并能够将优先级指定为'important'。看到这个。
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 中设置了宽度以避免与其他主题 CSS 发生冲突，但是我在 jQuery 中对宽度所做的任何更改都不会受到影响，因为它们会被添加到样式属性中。
对于使用该setProperty功能的优先级设置，本文表示支持IE 9+等所有浏览器。我曾尝试使用 IE 8 但它失败了，这就是为什么我在我的函数中构建了对它的支持（见上文）。它可以在使用 的所有其他浏览器上运行setProperty，但它需要我的自定义代码才能在 < IE 9 中运行。
您可以.width()像这样直接设置宽度：
$("#elem").width(100);
更新评论： 你也有这个选项，但它会替换元素上的所有 css，所以不确定它是否更可行：
$('#elem').css('cssText', 'width: 100px !important');
const elem = $("#elem");
elem[0].style.removeAttribute('width');
elem[0].style.setProperty('width', '100px', 'important');
注意：使用 Chrome 可能会返回一个错误，例如：
elem[0].style.removeAttribute 不是函数
更改线路以使用.removeProperty诸如elem[0].style.removeProperty('width');修复问题的功能。
David Thomas 的回答描述了一种使用 的方法$('#elem').attr('style', …)，但警告说使用它会删除style属性中先前设置的样式。这是一种attr()没有这个问题的使用方法：
var $elem = $('#elem');
$elem.attr('style', $elem.attr('style') + '; ' + 'width: 100px !important');
作为一个函数：
function addStyleAttribute($element, styleAttribute) {
$element.attr('style', $element.attr('style') + '; ' + styleAttribute);
}
addStyleAttribute($('#elem'), 'width: 100px !important');
这是一个JS Bin 演示。