Почему это важное значение CSS переопределено?

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/

Текст зеленый в Chrome, Safari и IE9, но красный в Firefox и Opera. (Кроме того, текст является черным в IE7 и IE8, потому что код вызывает ошибку, но пусть игнорирует это...)

Итак, какие браузеры следуют стандарту здесь? Должно ли быть возможно переопределить setProperty(...,'important') или нет?

ОТВЕТЫ

Ответ 1

Спецификация не ясна. Есть два способа взглянуть на это:

  • Это ошибка в WebKit/IE9. Если вы перезаписываете значение color, нет никаких оснований для того, чтобы старое значение оставалось вокруг, важно или нет.
  • WebKit/IE9 верны. Интерфейс DOM style управляет свойством style элемента, который считается Блок декларации CSS. В блоке CSS свойство с набором !important всегда будет иметь приоритет над теми, у кого нет. По этому правилу изменение на "красный" не должно иметь никакого эффекта, поэтому оно эффективно игнорируется.

Я считаю, что последнее является наиболее вероятным объяснением. Подумайте о том, как это сделать:

p { color: red !important; }

Если вы добавите второе правило color, без !important, оно не будет иметь эффекта:

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

То же самое относится к непосредственному манипулированию атрибутом HTML style.

Таким образом, поведение в 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');

И подсказка: в следующий раз выберите лучшую пару цветов, вы затрудняетесь с тем, чтобы цветной слепой помог:)

Ответ 2

Возможно, поведение Firefox и Opera более уместно.

Когда вы выдаете elem.style.color = 'red'; вы не отключили "важный" приоритет цвета, и в этом случае было бы целесообразно изменить цвет на красный. Насколько они предпочитают делать это так или иначе, я не знаю.

Ответ 3

Можно ли переопределить setProperty (..., 'important') или нет? да, должно. но вы должны сделать это с помощью другого вызова ele.style.setProperty. посмотрите this, и вы должны увидеть red во всех современных браузерах.

Итак, какие браузеры следуют стандарту здесь? поскольку green устанавливается с помощью !important, его не следует заменять на red, так как red не устанавливается с помощью !important. это означает, что хром, сафари и IE9 следуют стандарту, а firefox - НЕ.