Überschreiben! Wichtiger Stil

Der Titel fasst es ziemlich gut zusammen.

Das externe Stylesheet enthält den folgenden Code:

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

Ich habe versucht:

element.style.display = "inline";

und

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

aber beides funktioniert nicht. Ist es möglich, einen! Wichtigen Stil mit Javascript zu überschreiben?

Dies ist für eine greasemonkey-Erweiterung, wenn dies einen Unterschied macht.

Ich glaube, der einzige Weg, dies zu tun, besteht darin, den Stil als neue CSS-Deklaration mit dem Suffix '! Important' hinzuzufügen. Der einfachste Weg, dies zu tun, besteht darin, ein neues <style> -Element an den Kopf des Dokuments anzuhängen:

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

Die mit der obigen Methode hinzugefügten Regeln überschreiben (wenn Sie das Suffix! Important verwenden) andere zuvor festgelegte Stile. Wenn Sie das Suffix nicht verwenden, müssen Sie Konzepte wie " Spezifität " berücksichtigen.

Es gibt ein paar einfache Einzeiler, mit denen Sie dies tun können.

1) Legen Sie ein "style" -Attribut für das Element fest:

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

oder...

2) Ändern Sie die cssTextEigenschaft des styleObjekts:

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

Entweder wird den Job machen.

===

Übrigens - wenn Sie ein nützliches Tool zum Bearbeiten von !importantRegeln in Elementen benötigen, habe ich ein jQuery-Plugin namens "wichtig" geschrieben: http://github.com/premasagar/important

element.stylehat eine setPropertyMethode, die die Priorität als dritten Parameter annehmen kann:

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

Es war nicht in alten IEs arbeiten , aber es sollte in Ordnung in aktuellen Browsern sein.

Aufbauend auf der hervorragenden Antwort von @ Premasagar; Wenn Sie nicht alle anderen Inline-Stile entfernen möchten, verwenden Sie diese Option

//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' : '') + ';');
}

_{Kann nicht verwendet werden, removeProperty()da !importantRegeln in Chrome nicht entfernt werden.
Kann nicht verwendet werden, element.style[property] = ''da nur camelCase in FireFox akzeptiert wird.}

Bessere Methode, die ich gerade entdeckt habe: Versuchen Sie, mit Ihren Selektoren spezifischer als das Seiten-CSS zu sein. Ich musste das heute nur tun und es funktioniert wie ein Zauber! Weitere Informationen finden Sie auf der W3C-Website: http://www.w3.org/TR/CSS2/cascade.html#specificity

Wenn Sie einen einzelnen Stil im DOM-Element-Stilattribut aktualisieren / hinzufügen möchten, können Sie folgende Funktion verwenden:

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 wird für alle gängigen Browser unterstützt .

Anwendungsfallbeispiel:

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

Hier ist ein Link zur Demo

Wenn Sie der Seite nur CSS hinzufügen, würde ich vorschlagen, dass Sie das Addon Stylish verwenden und anstelle eines Benutzerskripts einen Benutzerstil schreiben, da ein Benutzerstil effizienter und angemessener ist.

Auf dieser Seite finden Sie Informationen zum Erstellen eines Benutzerstils

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

Verwenden Sie die Eigenschaft initial in 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/

Eine Möglichkeit, die CSS-Klasse in JavaScript zu überschreiben, besteht darin, eine ID für das Stilelement zu verwenden, damit wir die CSS-Klasse aktualisieren können

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)

Anstatt Stil einzufügen, funktioniert es, wenn Sie eine Klasse (z. B. 'show') über ein Java-Skript einfügen. Aber hier brauchst du CSS wie unten. Die hinzugefügte CSS-Regel für Klassen sollte unter Ihrer ursprünglichen Regel liegen.

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

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

Dort haben wir eine weitere Möglichkeit, einen Eigenschaftswert aus dem CSS zu entfernen.

Wie bei der Ersetzungsmethode in js. Sie müssen jedoch die ID des Stils genau kennen, oder Sie können eine for-Schleife schreiben, um dies zu erkennen, indem Sie (Stile auf der Seite zählen und dann prüfen, ob einer dieser !importantWerte einen Wert enthält oder mit ihm übereinstimmt) . & Sie können zählen auch - wie viel enthält sie, oder schreiben Sie einfach eine globale [regexp: / str / gi] Ersetzungsmethode)

Meins ist sehr einfach, aber ich füge zum Beispiel einen jsBin hinzu:

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

Zuerst habe ich den !importantKörperhintergrund in CSS für Gelb festgelegt , dann habe ich JS für darkPink überschrieben.

Unten finden Sie einen Codeausschnitt zum Festlegen des wichtigen Parameters für das Stilattribut mithilfe von 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,";"));
};

Die Verwendung ist ziemlich einfach. Übergeben Sie einfach ein Objekt, das alle Attribute enthält, die Sie als wichtig festlegen möchten.

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

Es gibt zwei zusätzliche Optionen.

1.Um nur einen wichtigen Parameter zum bereits vorhandenen Stilattribut hinzuzufügen, übergeben Sie eine leere Zeichenfolge.

2.Um wichtige Parameter für alle vorhandenen Attribute hinzuzufügen, übergeben Sie nichts. Alle Attribute werden als wichtig festgelegt.

Hier ist es live in Aktion. http://codepen.io/agaase/pen/nkvjr