15

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

ライブデモ: http://jsfiddle.net/4fn6h/3/

テキストは、Chrome、Safari、および IE9 では緑色ですが、Firefox および Opera では赤色です。(また、コードがエラーをスローするため、IE7 と IE8 ではテキストが黒くなっていますが、無視しましょう...)

では、ここで標準に準拠しているブラウザはどれでしょうか? a をオーバーライドできるsetProperty(...,'important')かどうか。

4

3 に答える 3

2

スペックは不明。それを見るには2つの方法があります：

  1. これは WebKit/IE9 のバグです。値を上書きする場合、重要colorであろうとなかろうと、古い値が残っている理由はありません。
  2. WebKit/IE9 は正しいです。DOM インターフェイスは、 CSS 宣言ブロックと見なされる要素styleのプロパティを操作します。CSS ブロックでは、設定されたプロパティは、設定されていないプロパティよりも常に優先されます。その規則により、「赤」への変更は効果がないはずなので、効果的に無視されます。style!important

後者の説明が最も可能性が高いと思います。次のような宣言を検討してください。

p { color: red !important; }

colorなしで 2 番目のルールを追加し!importantても、効果はありません。

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

同じことが、HTMLstyle属性を直接操作する場合にも当てはまります。

そのため、Chrome/Safari/IE9 での動作は CSS カスケード ルールと一致していますが、FF と Opera は DOM スタイルをカスケード ルールに関係なく単純なオブジェクトとして扱い、CSS 宣言へのインターフェイスとしてではありません。

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

興味深い事実: webkit は に対して文字列の一致を行っているように見えるためimportant、これも機能します。

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

ヒント: 次回はより良い色のペアを選択してください。色弱者にとっては助けになりません :)

于 2012-05-24T03:57:24.007 に答える
0

setProperty(...,'important') をオーバーライドすることは可能ですか? はい、そうすべきです。ele.style.setPropertyただし、別の呼び出しでそれを行う必要があります。これを見てくださいred。最新のすべてのブラウザーで表示されるはずです。

では、ここで標準に準拠しているブラウザはどれでしょうか? greenは で設定されているため、で設定されて!importantいないので に置き換えてredはなりredません!important。つまり、chrome、safari、IE9 は標準に従っており、firefox はそうではありません。

于 2012-05-24T04:34:08.163 に答える
0

Firefox と Opera の動作の方が適切である可能性があります。

elem.style.color = 'red'; を発行すると、色の「重要な」優先度をオフにしませんでした。この場合、色を赤に変更するのが理にかなっています。彼らが何らかの方法でそれを選択する理由については、私にはわかりません。

于 2012-05-22T20:23:06.873 に答える