重要なスタイルのオーバーライド

タイトルはそれをかなり要約します。

外部スタイルシートには次のコードがあります。

td.EvenRow a {
  display: none !important;
}

私は使ってみました：

element.style.display = "inline";

そして

element.style.display = "inline !important";

しかしどちらも機能しません。JavaScriptを使用して！importantスタイルをオーバーライドすることは可能ですか？

これは、それが違いを生む場合のgreasemonkeyエクステンション用です。

これを行う唯一の方法は、スタイルを「！important」接尾辞付きの新しいCSS宣言として追加することです。これを行う最も簡単な方法は、ドキュメントの先頭に新しい<style>要素を追加することです。

function addNewStyle(newStyle) {
    var styleElement = document.getElementById('styles_js');
    if (!styleElement) {
        styleElement = document.createElement('style');
        styleElement.type = 'text/css';
        styleElement.id = 'styles_js';
        document.getElementsByTagName('head')[0].appendChild(styleElement);
    }
    styleElement.appendChild(document.createTextNode(newStyle));
}

addNewStyle('td.EvenRow a {display:inline !important;}')

上記のメソッドで追加されたルールは、（重要なサフィックスを使用する場合）以前に設定された他のスタイルをオーバーライドします。サフィックスを使用していない場合は、「特異性」などの概念を考慮に入れてください。

これを行うために使用できる簡単なワンライナーがいくつかあります。

1）要素に「スタイル」属性を設定します。

element.setAttribute('style', 'display:inline !important');

または...

2）オブジェクトのcssTextプロパティを変更しstyleます。

element.style.cssText = 'display:inline !important';

どちらでもうまくいきます。

===

ところで!important、要素のルールを操作するための便利なツールが必要な場合は、「重要」というjQueryプラグインを作成しました。http：//github.com/premasagar/important

element.style有するsetProperty第三のパラメータとして優先権を取ることができる方法。

element.style.setProperty("display", "inline", "important")

それは古いのIEで動作しませんでしたが、それは、現在のブラウザで問題ないはずです。

@Premasagarの優れた答えに基づいて構築。他のすべてのインラインスタイルを削除したくない場合は、これを使用します

//accepts the hyphenated versions (i.e. not 'cssFloat')
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] = ''。}

私が発見したより良い方法：セレクターでページCSSよりも具体的になるようにしてください。今日これをしなければならなかっただけで、それは魅力のように機能します！W3Cサイトの詳細：http : //www.w3.org/TR/CSS2/cascade.html#specificity

DOM要素のスタイル属性で単一のスタイルを更新または追加する場合は、次の関数を使用できます。

function setCssTextStyle(el, style, value) {
  var result = el.style.cssText.match(new RegExp("(?:[;\\s]|^)(" +
      style.replace("-", "\\-") + "\\s*:(.*?)(;|$))")),
    idx;
  if (result) {
    idx = result.index + result[0].indexOf(result[1]);
    el.style.cssText = el.style.cssText.substring(0, idx) +
      style + ": " + value + ";" +
      el.style.cssText.substring(idx + result[1].length);
  } else {
    el.style.cssText += " " + style + ": " + value + ";";
  }
}

style.cssTextは、すべての主要なブラウザでサポートされています。

使用例：

var elem = document.getElementById("elementId");
setCssTextStyle(elem, "margin-top", "10px !important");

ここにデモへのリンクがあります

CSSをページに追加するだけの場合は、Stylishアドオンを使用して、ユーザースクリプトの代わりにユーザースタイルを記述することをお勧めします。ユーザースタイルの方が効率的で適切だからです。

ユーザースタイルの作成方法については、このページをご覧ください。

https://developer.mozilla.org/en-US/docs/Web/CSS/initial

css3で初期プロパティを使用する

 <p style="color:red!important"> 
    this text is red 
       <em style="color:initial"> 
          this text is in the initial color (e.g. black)
       </em>
    this is red again
 </p>

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

JavaScriptでCSSクラスをオーバーライドする1つのオプションは、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)

スタイルを挿入するのではなく、Javaスクリプトを介してクラス（例： 'show'）を挿入すると、機能します。しかし、ここでは以下のようなcssが必要です。追加されたクラスのcssルールは、元のルールの下にある必要があります。

td.EvenRow a{
  display: none !important;
}

td.EvenRow a.show{
  display: block !important;
}

CSSからプロパティ値を削除する別の可能性があります。

jsでreplaceメソッドを使用するように。ただし、スタイルのIDを正確に知っている必要があります。または、forループを記述してそれを検出する（ページ上のスタイルをカウントし、!important値の「インクルード」または「一致」があるかどうかを確認します。また、どれくらい含まれているか、または単にグローバルな[regexp：/ str / gi]置換メソッドを記述します）

鉱山は非常に単純ですが、たとえば、jsBinをアタッチします。

https://jsbin.com/geqodeg/edit?html,css,js,output

まず、CSSで本体の背景をyellowに設定してから、!importantJSでdarkPinkをオーバーライドしました。

以下は、jqueryを使用してスタイル属性の重要なパラメーターを設定するコードのスニペットです。

$.fn.setFixedStyle = function(styles){
    var s = $(this).attr("style");
    s = "{"+s.replace(/;/g,",").replace(/'|"/g,"");
    s = s.substring(0,s.length-1)+"}";
    s = s.replace(/,/g,"\",\"").replace(/{/g,"{\"").replace(/}/g,"\"}").replace(/:/g,"\":\"");
    var stOb = JSON.parse(s),st;
    if(!styles){
     $.each(stOb,function(k,v){
      stOb[k] +=" !important";
     });
    }
    else{
     $.each(styles,function(k,v){
      if(v.length>0){
        stOb[k] = v+" !important";
      }else{
        stOb[k] += " !important";  
      }
     });
    }
    var ns = JSON.stringify(stOb);
    $(this).attr("style",ns.replace(/"|{|}/g,"").replace(/,/g,";"));
};

使い方は非常に簡単です。重要なものとして設定したいすべての属性を含むオブジェクトを渡すだけです。

$("#i1").setFixedStyle({"width":"50px","height":""});

2つの追加オプションがあります。

1.すでに存在するスタイル属性に重要なパラメータを追加するには、空の文字列を渡します。

2.存在するすべての属性に重要なパラメータを追加するには、何も渡さないでください。すべての属性を重要として設定します。

これが実際に動作しています。http://codepen.io/agaase/pen/nkvjr