我在應用一種風格時遇到了麻煩！重要。我試過了:

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

這沒有任何作用；不應用任何寬度樣式。有沒有一種類似jQuery的方法可以應用這種樣式而不必覆蓋cssText(這意味著我需要先解析它，等等)。)?

編輯:我應該補充一點，我有一個帶有！我試圖用一個！重要的內聯樣式，所以使用。width()之類的東西不起作用，因為它被我的外部！重要的風格。

此外，將覆蓋前一個值的值是計算出來的，所以我不能簡單地創建另一個外部樣式。

該問題是由jQuery不理解！重要屬性，因此無法應用該規則。

您也許能夠解決這個問題，并通過addClass()引用它來應用規則:

.importantRule { width: 100px !important; }

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

或者使用attr():

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

但是，后一種方法會取消任何以前設置的內聯樣式規則。所以要小心使用。

當然，有一個很好的論點是@Nick Craver的方法更容易/更明智。

上面的attr()方法稍作修改以保留原始的樣式字符串/屬性，并按照falko在注釋中的建議進行了修改:

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

我想我找到解決辦法了。我把它變成了一個新功能:

jQuery.style(名稱，值，優先級)；

您可以使用它來獲取值。風格('名稱')就像。css('name ')，用。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值的示例，請參見此處。我的問題是我已經設定了！為了避免與其他主題CSS沖突，我的CSS中的寬度很重要，但是我在jQuery中對寬度所做的任何更改都不會受到影響，因為它們會被添加到style屬性中。

和睦相處 對于使用setProperty函數設置優先級，這篇文章說支持IE 9+和所有其他瀏覽器。我已經用IE 8試過了，它失敗了，這就是為什么我在我的函數中構建了對它的支持(見上圖)。它可以在所有其他使用setProperty的瀏覽器上運行，但是它需要我的自定義代碼才能在& ltIE 9。

您可以使用直接設置寬度。寬度()如下:

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

已更新以征求意見: 您也有這個選項，但是它將替換元素上的所有css，所以不確定它是否更可行:

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

注意: 使用Chrome可能會返回錯誤，例如:

elem[0].style.removeAttribute不是函數

將該行更改為使用。removeProperty函數，如to elem[0]. style . remove property(' width ')；已修復問題。

戴維·托馬斯的回答描述了一種使用$('#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的演示。

在閱讀了其他答案并進行試驗后，以下是對我有效的方法:

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

不過，這在IE 8及以下版本中不起作用。

您可以這樣做:

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

使用“cssText”作為屬性名，并使用您希望添加到CSS中的任何內容作為其值。

這些答案現在大部分都過時了，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的例子。

您可以通過兩種方式實現這一點:

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

不需要去糾結@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中的重要規則。 無法使用element.style[property] = ' '，因為它在Firefox中只接受camelCase。

你也許可以用jQuery來縮短這個函數，但是這個普通的函數將會運行在現代的瀏覽器上，比如InternetExplorer8等等。

下面是我遇到這個問題后的做法...

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

此解決方案不會覆蓋任何以前的樣式，它只是應用您需要的樣式:

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

對我來說，這個問題最簡單和最好的解決方案是簡單地使用addClass()而不是。css()或。屬性()。

例如:

$('#elem ')。add class(“important class”)；

在您的CSS文件中:

.importantClass {
    width: 100px !important;
}

不使用css()函數，而是嘗試使用addClass()函數:

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

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

如果它不是那么相關，并且因為您處理的是一個元素#elem，您可以將它的id更改為其他內容，并按照您的意愿設置樣式...

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

在你的CSS中:

#cheaterId { width: 100px;}

僅供參考，它不工作，因為jQuery不支持它。有一張2012年的罰單(#11173 $(elem)。css("property "，" value！重要”)失敗)最終被關閉為WONTFIX。

我們首先需要刪除以前的樣式。我用正則表達式移除它。下面是一個改變顏色的例子:

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

在head中添加樣式的另一種方法是:

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

這將在所有CSS文件后附加樣式，因此它將比其他CSS文件具有更高的優先級，并將被應用。

可能是這樣的:

隱藏物

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

Set CSS

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

Remove CSS

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

I think it works OK and can overwrite any other CSS before (this: DOM element):

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

像這樣做:

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

這個解決方案將保留所有計算的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

我也有過類似的情況，但是我用了。苦苦掙扎后找到()。最接近()很長一段時間有許多變化。

示例代碼

// 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選擇器。

例如，如果您想要第三個和第六個實例。cssText具有不同的寬度，您可以編寫:

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

我會假設你沒有添加就嘗試了！重要嗎？

內聯CSS(JavaScript就是這樣添加樣式的)覆蓋了樣式表CSS。我敢肯定，即使樣式表CSS規則有！重要。

另一個問題(可能是個很蠢但必須問的問題。):您嘗試處理的元素是否顯示為:block或者顯示:inline-block；？

不知道你在CSS方面的專業知識...內聯元素的行為并不總是如你所料。

我們可以用setProperty或者cssText來添加！對于使用JavaScript的DOM元素很重要。

示例1:

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

示例2:

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

我還發現某些元素或插件(如Bootstrap)有一些特殊的類情況，它們不能很好地處理！重要的或其他變通辦法，如。addClass/。removeClass，因此您必須打開/關閉它們。

例如，如果您使用類似& lttable class="table-hover " >成功修改元素(如行的顏色)的唯一方法是打開/關閉表格懸停類，如下所示

$(your_element)。最近的(“表”)。toggleClass("表格懸停")；

希望這個解決方法對某人有所幫助！:)

當“事件”發生時，我在試圖改變菜單項的文本顏色時遇到了同樣的問題。當我遇到同樣的問題時，我發現最好的方法是:

第一步:在你的CSS中創建一個新類，例如:

.colorw{ color: white !important;}

最后一步:使用addClass方法應用這個類，如下所示:

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

問題解決了。

最安全的解決方法是添加一個類，然后在CSS中施展魔法:-)、addClass()和removeClass()應該可以完成這項工作。

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)