あるスタイルを適用できません!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')同じよう.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との競合を避けるためにCSSの幅をし、jQueryで幅に加えた変更は、style属性に追加されるため、影響を受けません。

互換性

この記事では、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のデモです。

他の答えを読んで実験した後、これは私にとってうまくいきます：

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

ただし、これはIE 8以下では機能しません。

あなたはこれを行うことができます：

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

プロパティ名として「cssText」を使用し、CSSに値として追加したいものを使用します。

これは、次の2つの方法で実現できます。

$("#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' : '') + ';');
}

_{ChromeのルールがremoveProperty()削除されないため、を 使用できません!important。Firefoxではキャメルケースしか受け付け
ないためelement.style[property] = ''、は使用できません。}

おそらくjQueryでこれを短くすることができますが、このバニラ関数は最新のブラウザー、Internet Explorer 8などで実行されます。

これがこの問題に遭遇した後に私がしたことです...

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

それがあまり関連性がなく、である1つの要素を扱っている#elemので、そのIDを別のものに変更して、希望どおりにスタイルを設定できます...

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

そしてあなたのCSSで：

#cheaterId { width: 100px;}

css()関数を使用する代わりに、関数を試してくださいaddClass()：

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

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

私からのこの問題の最も簡単で最良の解決策は、単に.css（）または.attr（）の代わりにaddClass（）を使用することでした。

例えば：

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

そしてあなたのCSSファイルで：

.importantClass {
    width: 100px !important;
}

ちなみに、jQueryはサポートしていないため、機能しません。2012年に提出されたチケット（＃11173 $（elem）.css（ "property"、 "value！important"）が失敗）があり、最終的にWONTFIXとしてクローズされました。

これらの回答のほとんどは古くなっており、IE7のサポートは問題ではありません。

IE11 +とすべての最新のブラウザーをサポートするこれを行う最善の方法は次のとおりです。

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

または、必要に応じて、これを行う小さなjQueryプラグインを作成できます。このプラグインcss()は、サポートするパラメーターがjQuery独自のメソッドと厳密に一致します。

/**
 * 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の例はこちら。

まず、以前のスタイルを削除する必要があります。正規表現で削除します。色を変更する例を次に示します。

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

頭にスタイルを追加する別の方法：

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

これにより、すべてのCSSファイルの後にスタイルが追加されるため、他のCSSファイルよりも優先されて適用されます。

それはこのように見えるかもしれません：

キャッシュ

var node = $（ '。selector'）[0];
または
var node = document.querySelector（ '。selector'）;

CSSを設定

node.style.setProperty（ 'width'、 '100px'、 'important'）;

CSSを削除

node.style.removeProperty（ 'width'）;
または
node.style.width = '';

私はそれがうまくいくと思い、以前に他のCSSを上書きすることができます（これ：DOM要素）：

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

3つの作業例

私も同じような状況でしたが、.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/

状況に応じて適切な場合とそうでない場合がありますが、これらのタイプの多くの状況で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;}

追加せずに試したと思います!importantか？

インラインCSS（JavaScriptがスタイルを追加する方法）は、スタイルシートCSSをオーバーライドします。スタイルシートのCSSルールがそうであっても、それは事実だと確信してい!importantます。

別の質問（馬鹿げた質問かもしれませんが、尋ねる必要があります。）：作業しようとしている要素はありますdisplay:block;かdisplay:inline-block;？

CSSの専門知識がわからない...インライン要素が期待どおりに動作しない場合があります。

setPropertyまたはcssTextを使用して、 !importantJavaScriptを使用して、 DOM要素ます。

例1：

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

例2：

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

また、特定の要素または（Bootstrapなどの）アドオンには、などの特別なクラスケース!importantやのような他の回避策.addClass/.removeClassがあるため、オン/オフを切り替える必要があることも発見しました。

たとえば<table class="table-hover">、行の色などの要素を正常に変更する唯一の方法のようなものを使用する場合table-hover、このようにクラスをオン/オフに切り替えることです

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

うまくいけば、この回避策は誰かに役立つでしょう！:)

「イベント」のときにメニュー項目のテキストの色を変更しようとすると、同じ問題が発生しました。これと同じ問題が発生したときに見つけた最良の方法は、次のとおりです。

最初のステップ：CSSで、この目的を持つ新しいクラスを作成します。次に例を示します。

.colorw{ color: white !important;}

最後のステップ：次のようにaddClassメソッドを使用してこのクラスを適用します。

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

問題が解決しました。

これに対する最も安全な回避策は:-)クラスを追加して、CSSで魔法を行うことです、addClass()そしてremoveClass()作業を行う必要があります。

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

別のアプローチは、JavaScriptでCSSクラスを動的に作成および更新することです。これを行うには、スタイル要素を使用でき、CSSクラスを更新できるようにスタイル要素のIDを使用する必要があります

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)