Добавление! Важный в динамически написанной таблице стилей для Internet Explorer

Question

Я экспериментировал с использованием JavaScript для динамического написания таблиц стилей. В Firefox можно использовать метод setProperty в стиле для cssRules styleSheets, например ...

document.styleSheets[0].cssRules[0].style
  .setProperty(propertyName, propertyValue, 'important');

... для установки флага !important в стиле. Я не нашел аналога для этого в Internet Explorer (метод setAttribute не имеет такой опции для установки флага !important для стиля). Некоторые эксперименты обнаружили, что для точных стилей, таких как border-top-width,, я могу переписать строку cssText, чтобы добавить !important, но затем я обнаружил, что если вы индивидуально устанавливаете все границы, IE переписывает фактическое правило, чтобы оно было коротким ручная форма, поэтому она переписывается в border-top, border-right и т. д., и каждый из них устанавливается, но без флага !important. Кроме того, если я явно установлю его с помощью сокращенной формы, он не не принимает перезапись cssText для принятия флага !important.

Таким образом, вопрос в том, знает ли кто-нибудь, как при динамической записи стилей в правило styleSheets заставить IE постоянно устанавливать флаг !important для этого правила?

Спасибо за вашу помощь,

Scott

Answer 1

Я потратил еще немного времени на тестирование и пришел к выводу, что моя перезапись cssText - , работающая над добавлением !important к некоторому таинственному внутреннему установка флага IE, хотя сокращенные свойства, которые сам переписывает для cssText, не отражают этого.

По-видимому, ни свойство cssText (если оно проверяется после моего перезаписи на добавление !important), ни проверка панели инструментов Microsoft Developer на элементе не показывают, что свойство имеет настройку !important. , Элемент, однако, отображается так, как будто моя перезапись сработала. Я проверил это, поместив !important в базовый стиль для границы изображения, например:

img {border: 3px solid green !important;}

Затем с помощью javascript я создал свой объект styleSheets и добавил правило, которое было более конкретным (с использованием id изображения) и для которого cssText было переписано с помощью !important после того, как уже было установлено style объекта styleSheets с помощью вызова JavaScript для borderTopColor = red. Затем я установил встроенный стиль элемента, чтобы изменить верхний цвет на желтый. Результаты были, как я и ожидал, с флагом !important. Красный выигрывает, так как это более поздний (и более конкретный) вызов, чем исходный зеленый, и встроенный стиль не перекрывает его. Если я удаляю перезапись !important, то цвет становится зеленым, а если я удаляю зеленый !important, цвет превращается в желтый.

Я также проверил это с зеленым, имеющим более высокую специфичность селектора, чем мой стиль написания javascript для красного. Это также велось, как и ожидалось, с зеленым выигрышем, поскольку теперь у него была более высокая специфичность в отношении селектора с конкурирующей !important красной декларации.

Это было проверено на IE8, IE7 и IE6 (да, там тоже работало). Хотя переписать / установить cssText styleSheets не так просто, как установить его с помощью прямого вызова javascript для свойства, по крайней мере, это работает. Настоящая «ошибка» заключается в том, что ни cssText, ни панель инструментов разработчика не давали мне правильной информации о том, что для этих стилей был установлен флаг !important, поэтому, если кто-то придет и осмотрит сайт, он может запутаться почему что-то происходит со стилями (почему то, что не кажется важным, действует так, как будто это так).

Answer 2

Я думаю, что вам лучше всего написать свою CSS, чтобы вам не приходилось использовать! Важно, чтобы переопределить стили в каскаде. Это отстой, но вот как IE рушится.