[解決済み] .css()を使って!importantを適用するには？

質問

というスタイルを適用するのに苦労しています。 !important . 試してみました。

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

これは 何もない 幅のスタイルが全く適用されません。を上書きすることなく、このようなスタイルを適用するjQuery的な方法はないでしょうか？ cssText (つまり、最初にパースする必要があるなど)?

編集 : 付け加えると、スタイルシートに !important スタイルで上書きしようとしています。 !important スタイルをインラインで使用するため .width() などは、外部の !important のスタイルになります。

また、前の値を上書きする値 は計算されます そのため、単純に別の外部スタイルを作成することはできません。

解決方法は？

これらの回答のほとんどは、現在では古くなっており、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の例はこちら .