您可以像这样使用.width()直接设置宽度：

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

更新评论：你也有这个选项，但它会替换元素上的所有css，所以不确定它是否更可行：

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

问题是由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;' });

我假设你尝试过没有添加!important？

内联CSS（这是JavaScript添加样式的方式）覆盖样式表CSS。我很确定即使样式表CSS规则有!important也是如此。

另一个问题（可能是一个愚蠢的问题，但必须问）：您尝试处理的元素是display:block;还是display:inline-block;？

不知道你在CSS方面的专业知识…内联元素并不总是像你期望的那样表现。

如果它不是那么相关，并且因为您正在处理一个#elem的元素，您可以将其id更改为其他内容并根据需要设置样式……

$('#elem').attr('id', 'cheaterId');

在你的CSS中：

#cheaterId { width: 100px;}

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

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

输出示例：

nullredblueimportant

的功能

(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 functionsvar 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 manuallyvar 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 nodevar node = this.get(0);// Ensure we have a DOM nodeif (typeof node == 'undefined') {return this;}// CSSStyleDeclarationvar style = this.get(0).style;// Getter/Setterif (typeof styleName != 'undefined') {if (typeof value != 'undefined') {// Set style propertypriority = typeof priority != 'undefined' ? priority : '';style.setProperty(styleName, value, priority);return this;} else {// Get style propertyreturn style.getPropertyValue(styleName);}} else {// Get CSSStyleDeclarationreturn style;}};})(jQuery);

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

兼容性

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

大卫·托马斯的回答描述了一种使用$('#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演示。

此解决方案不会覆盖任何以前的样式，它只是应用您需要的样式：

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

我们首先需要删除之前的样式。我使用正则表达式删除它。这是一个更改颜色的示例：

var SetCssColorImportant = function (jDom, color) {var style = jDom.attr('style');style = style.replace(/color: .* !important;/g, '');jDom.css('cssText', 'color: ' + color + ' !important;' + style); }

以下是我在遇到这个问题后所做的…

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

在head中附加样式的另一种方法：

$('head').append('<style> #elm{width:150px !important} </style>');

这将在所有CSS文件之后附加样式，因此它将比其他CSS文件具有更高的优先级并将被应用。

它可能适合您的情况，也可能不适合您的情况，但您可以在很多此类情况下使用CSS选择器。

例如，如果您希望. cssText的第3和第6个实例具有不同的宽度，您可以编写：

.cssText:nth-of-type(3), .cssText:nth-of-type(6) {width:100px !important;}

或：

.container:nth-of-type(3).cssText, .container:nth-of-type(6).cssText {width:100px !important;}

像这样做：

$("#elem").get(0).style.width= "100px!important";

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

备注：使用Chrome可能会返回错误，例如：

elem[0].style.remove属性不是函数

更改行以使用.removeProperty函数，例如elem[0].style.removeProperty('width');修复了问题。

没有必要去@AramKocharyan的答案的复杂性，也不需要动态插入任何样式标签。

只要覆盖样式，但是你不需要解析任何东西，为什么要解析？

// Accepts the hyphenated versions (i.e. not 'cssFloat')function addStyle(element, property, value, important) {// Remove previously defined propertyif (element.style.setProperty)element.style.setProperty(property, '');elseelement.style.setAttribute(property, '');
// Insert the new style with all the old ruleselement.setAttribute('style', element.style.cssText +property + ':' + value + ((important) ? ' !important' : '') + ';');}

_{不能使用removeProperty()，因为它不会删除Chrome中的!important规则。不能使用element.style[property] = ''，因为它只接受Firefox中的camelCase。}

您可能可以使用jQuery使其更短，但此普通函数将在现代浏览器、Internet Explorer 8等上运行。

另一种解决此问题的简单方法是添加style属性：

$('.selector').attr('style', 'width:500px !important');

我还发现某些元素或附加组件（如Bootstrap）有一些特殊的类情况，它们不能很好地与!important或其他工作区（如.addClass/.removeClass）一起使用，因此您必须打开/关闭它们。

例如，如果您使用<table class="table-hover">之类的东西，成功修改元素（例如行的颜色）的唯一方法是打开/关闭table-hover类，如下所示

$(your_element).closest("table").toggleClass("table-hover");

希望这个解决方案对某人有帮助！：）

在阅读了其他答案和实验之后，这对我来说是有效的：

$(".selector")[0].style.setProperty( 'style', 'value', 'important' );

不过，这在IE 8及以下不起作用。

你可以这样做：

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

使用“cssText”作为属性名称，并将您想要添加到CSS中的任何内容作为其值。

不要使用css()函数，试试addClass()函数：

  <script>$(document).ready(function() {$("#example").addClass("exampleClass");});</script>
<style>.exampleClass{width:100% !important;height:100% !important;}</style>

它可能看起来像这样：

缓存

var node = $('.selector')[0];ORvar node = document.querySelector('.selector');

设置CSS

node.style.setProperty('width', '100px', 'important');

Remove CSS

node.style.removeProperty('width');ORnode.style.width = '';

您可以通过两种方式实现这一目标：

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

对于这个问题，最简单和最好的解决方案是简单地使用addClass（）而不是. css（）或. attr（）。

例如：

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

在您的CSS文件中：

.importantClass {width: 100px !important;}

仅供参考，它不起作用，因为jQuery不支持它。2012年提交了一张票（#11173$（elem）. css（"属性"，"值！重要"）失败），最终以WONTFIX身份关闭。

我们可以使用setProperty或cssText使用JavaScript将!important添加到DOM元素。

示例1：

elem.style.setProperty ("color", "green", "important");

示例2：

elem.style.cssText='color: red !important;'

另一种方法是在JavaScript中动态创建和更新CSS类。为此，我们可以使用style元素并需要为style元素使用ID，以便我们可以更新CSS类

function writeStyles(styleName, cssText) {var styleElement = document.getElementById(styleName);if (styleElement) document.getElementsByTagName('head')[0].removeChild(styleElement);styleElement = document.createElement('style');styleElement.type = 'text/css';styleElement.id = styleName;styleElement.innerHTML = cssText;document.getElementsByTagName('head')[0].appendChild(styleElement);}

…

  var cssText = '.testDIV{ height:' + height + 'px !important; }';writeStyles('styles_js', cssText)

我在尝试在“事件”时更改菜单项的文本颜色时遇到了同样的问题。当我遇到同样的问题时，我发现的最好方法是：

第一步：在您的CSS中为此目的创建一个新类，例如：

.colorw{ color: white !important;}

最后一步：使用addClass方法应用此类，如下所示：

$('.menu-item>a').addClass('colorw');

问题解决了。

三个工作示例

我也遇到过类似的情况，但我使用. fint（）是在与.最接近的（）斗争了很长时间之后，有很多变体。

示例代码

// Allows contain functions to work, ignores case sensitivity
jQuery.expr[':'].contains = function(obj, index, meta, stack) {result = false;theList = meta[3].split("','");var contents = (obj.textContent || obj.innerText || jQuery(obj).text() || '')for (x=0; x<theList.length; x++) {if (contents.toLowerCase().indexOf(theList[x].toLowerCase()) >= 0) {return true;}}return false;};
$(document).ready(function() {var refreshId = setInterval( function() {$("#out:contains('foo', 'test456')").find(".inner").css('width', '50px', 'important');}, 1000); // Rescans every 1000 ms});

替代

$('.inner').each(function () {this.style.setProperty('height', '50px', 'important');});
$('#out').find('.inner').css({ 'height': '50px'});

工作：http://jsfiddle.net/fx4mbp6c/

我认为它工作正常，可以覆盖之前的任何其他CSS（this： DOM元素）：

this.setAttribute('style', 'padding:2px !important');

最安全的解决方法是添加一个类，然后在CSS中施展魔法 :-), addClass()和removeClass()应该可以完成这项工作。

此解决方案将保留所有计算的javascript并将重要标记添加到元素中：可以这样做（Ex如果需要设置重要标签的宽度）

$('exampleDiv').css('width', '');//This will remove the width of the itemvar styles = $('exampleDiv').attr('style');//This will contain all styles in your item//ex: height:auto; display:block;styles += 'width: 200px !important;'//This will add the width to the previous styles//ex: height:auto; display:block; width: 200px !important;$('exampleDiv').attr('style', styles);//This will add all previous styles to your item

大多数这些答案现在已经过时，IE7支持不是问题。

做到这一点的最好方法支持IE11+和所有现代浏览器是：

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

或者如果你愿意，你可以创建一个小的jQuery插件来执行此操作。这个插件在它支持的参数中与jQuery自己的css()方法非常匹配：

/*** Sets a CSS style on the selected element(s) with !important priority.* This supports camelCased CSS style property names and calling with an object* like the jQuery `css()` method.* Unlike jQuery's css() this does NOT work as a getter.** @param {string|Object<string, string>} name* @param {string|undefined} value*/jQuery.fn.cssImportant = function(name, value) {const $this = this;const applyStyles = (n, v) => {// Convert style name from camelCase to dashed-case.const dashedName = n.replace(/(.)([A-Z])(.)/g, (str, m1, upper, m2) => {return m1 + "-" + upper.toLowerCase() + m2;});// Loop over each element in the selector and set the styles.$this.each(function(){this.style.setProperty(dashedName, v, 'important');});};// If called with the first parameter that is an object,// Loop over the entries in the object and apply those styles.if(jQuery.isPlainObject(name)){for(const [n, v] of Object.entries(name)){applyStyles(n, v);}} else {// Otherwise called with style name and value.applyStyles(name, value);}// This is required for making jQuery plugin calls chainable.return $this;};

// Call the new plugin:$('#elem').cssImportant('height', '100px');
// Call with an object and camelCased style names:$('#another').cssImportant({backgroundColor: 'salmon', display: 'block'});
// Call on multiple items:$('.item, #foo, #bar').cssImportant('color', 'red');

jsfiddle示例