Warum wird dieser wichtige CSS-Wert außer Kraft gesetzt?

Question

HTML:

<div id="test">This is a test</div> 

JavaScript:

var elem = document.getElementById('test'); 

elem.style.setProperty('color', 'green', 'important'); 
elem.style.color = 'red'; 

Live-Demo:http://jsfiddle.net/4fn6h/3/

Der Text ist grün in Chrome, Safari und IE9, aber rot in Firefox und Opera. (Auch der Text ist schwarz in IE7 und IE8, weil der Code einen Fehler wirft, aber lassen Sie uns das ignorieren ...)

Also, welche Browser folgen dem Standard hier? Sollte es möglich sein, eine setProperty(...,'important') zu überschreiben oder nicht?

Answer 1

Es könnte sein, dass das Verhalten von Firefox und Opera angemessener ist.

Wenn Sie elem.style.color = 'red'; Sie haben die "wichtige" Priorität der Farbe nicht deaktiviert. In diesem Fall wäre es sinnvoll, die Farbe in Rot zu ändern. Warum sie es auf die eine oder andere Weise tun, weiß ich nicht.

Answer 2

Die Spezifikation ist nicht klar. Es gibt zwei Möglichkeiten, es zu betrachten:

1. es ist ein Fehler in WebKit/IE9. Wenn Sie den color Wert überschreiben, gibt es keinen Grund für den alten Wert, um zu bleiben, wichtig oder nicht.
2. WebKit/IE9 sind korrekt. Die DOM-Schnittstelle style manipuliert die style-Eigenschaft des Elements, die als CSS Declaration Block gilt. In einem CSS-Block hat eine Eigenschaft mit !important festgelegt immer Vorrang vor denen ohne. Nach dieser Regel sollte die Änderung auf "rot" keine Auswirkung haben, daher wird sie effektiv ignoriert.

Ich glaube, das letztere ist die wahrscheinlichste Erklärung. Betrachten Sie eine Erklärung wie folgt mit:

p { color: red !important; } 

Wenn Sie eine zweite color Regel hinzuzufügen, ohne !important, hat es keine Wirkung:

p { 
    color: red !important; 
    color: blue; 
} 
/* the color is still red */ 

Das gleiche gilt für die Manipulation des HTML style direkt zuzuschreiben.

Also das Verhalten in Chrome/Safari/IE9 ist konsistent mit den CSS-Cascading-Regeln, während FF und Opera DOM-Stil als ein einfaches Objekt ohne Berücksichtigung der Cascading-Regeln behandeln, nicht als Schnittstelle zu den CSS-Deklarationen.

http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-CSSStyleDeclaration

---

Fun fact: webkit scheint für important tun einen String Match werden, so dass dies funktioniert auch:

elem.style.setProperty('color', 'red', 'this is a really important rule'); 

---

Und ein Tipp: wählen Sie eine bessere Farb Paar Das nächste Mal, Sie machen es schwer für die Farbe blind zu helfen :)

Answer 3

Sh wäre es möglich, eine setProperty (..., 'wichtig') zu überschreiben oder nicht? ja sollte es. aber Sie müssen es mit einem anderen ele.style.setProperty Anruf tun. werfen Sie einen Blick auf this und Sie sollten red in allen modernen Browsern sehen.

Also, welche Browser folgen hier dem Standard? seit green ist mit !important eingestellt, sollte es nicht mit red ersetzt werden, da red nicht mit !important festgelegt ist. Das bedeutet Chrom, Safari und IE9 folgen dem Standard und Firefox ist NICHT.