如何使用 .css() 应用 !important？

Question

我在应用!important样式时遇到问题。 我试过了：

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

这什么都不做； 没有应用任何宽度样式。 是否有一种 jQuery 风格的方式来应用这种样式而不必覆盖cssText （这意味着我需要先解析它等）？

编辑：我应该补充一点，我有一个带有!important样式的样式表，我试图用!important样式内联覆盖它，因此使用.width()等不起作用，因为它被我的外部!important样式覆盖了.

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

Answer 1

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

Answer 2

我想我已经找到了解决办法。 我已经把它变成了一个新功能：

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

兼容性

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

Answer 3

您可以直接使用.width()设置宽度，如下所示：

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

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

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

Answer 4

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'); 解决了这个问题。

Answer 5

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 演示。

Answer 6

阅读其他答案并进行实验后，这对我有用：

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

但是，这在 IE 8 及以下版本中不起作用。

Answer 7

你可以这样做：

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

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

Answer 8

大多数这些答案现在已经过时，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 在这里。

Answer 9

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

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

Answer 10

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

只需覆盖样式，但您不必解析任何内容，为什么要？

// Accepts the hyphenated versions (i.e. not 'cssFloat')
function addStyle(element, property, value, important) {
    // Remove previously defined property
    if (element.style.setProperty)
        element.style.setProperty(property, '');
    else
        element.style.setAttribute(property, '');

    // Insert the new style with all the old rules
    element.setAttribute('style', element.style.cssText +
        property + ':' + value + ((important) ? ' !important' : '') + ';');
}

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

你可以用 jQuery 缩短这个时间，但这个普通的函数将在现代浏览器、Internet Explorer 8 等上运行。

Answer 11

这是我遇到这个问题后所做的......

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

Answer 12

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

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

Answer 13

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

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

在你的 CSS 中：

#cheaterId { width: 100px;}

Answer 14

我对这个问题最简单和最好的解决方案是简单地使用 addClass() 而不是 .css() 或 .attr()。

例如：

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

在你的 CSS 文件中：

.importantClass {
    width: 100px !important;
}

Answer 15

尝试使用addClass()函数，而不是使用css() addClass()函数：

  <script>
  $(document).ready(function() {
    $("#example").addClass("exampleClass");
  });
  </script>

  <style>
  .exampleClass{
    width:100% !important;
    height:100% !important;
  }
  </style>

Answer 16

仅供参考，它不起作用，因为 jQuery 不支持它。 2012 年提交了一张票（ #11173 $(elem).css("property", "value !important") failed），最终以 WONTFIX 的形式关闭。

Answer 17

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

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

Answer 18

在头部附加样式的另一种方法：

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

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

Answer 19

可能看起来像这样：

缓存

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

设置 CSS

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

删除 CSS

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

Answer 20

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

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

Answer 21

像这样做：

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

Answer 22

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

$('exampleDiv').css('width', '');
//This will remove the width of the item
var 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

Answer 23

三个工作实例

我也遇到过类似的情况，但是在与 .closest() 挣扎了很长时间后，我使用了 .find() 并有很多变化。

示例代码

// 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/

Answer 24

它可能适合也可能不适合您的情况，但您可以将 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;}

Answer 25

我假设您在不添加!important情况下尝试过？

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

另一个问题（可能是一个愚蠢的问题，但必须问。）：您正在尝试处理的元素是display:block;吗display:block; 或display:inline-block; ?

不了解您在 CSS 方面的专业知识...内联元素并不总是如您所愿。

Answer 26

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

示例 1：

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

示例 2：

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

Answer 27

我还发现某些元素或附加组件（如 Bootstrap）有一些特殊的类情况，它们不能很好地与!important或其他变通方法如.addClass/.removeClass ，因此您必须将它们切换为/离开。

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

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

希望这种解决方法对某人有所帮助！ :)

Answer 28

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

第一步：在你的 CSS 中创建一个用于此目的的新类，例如：

.colorw{ color: white !important;}

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

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

问题解决了。

Answer 29

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

Answer 30

https://jsfiddle.net/xk6Ut/256/

另一种方法是在 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)

Answer 31

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

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