Динамическое изменение CSS-expression через JS // Блог непонятно кого

No public Twitter messages.


Этот блог устарел и, скорее всего, больше не будет обновляться. В ближайшем будущем он переедет сюда.
9 ноября 2012 // Веб-разработка

Динамическое изменение CSS-expression через JS

Привет.

Всем давно известно, что IE до 7 версии не поддердживал CSS-свойство position: fixed; и всем также давно известно, как осуществляется совместимость — через JS внутри CSS-expression: position: absolute; top: expression(document.getElementsByTagName("body")[0].scrollTop + "px");. Казалось бы, что сейчас такие дремучие версии IE уже никому не нужны, однако, как опять же всем давно известно, существует и некий Quirks Mode, который используют некоторые крупные сервисы (Amazon, например) и при создании браузерных плагинов, которые вставляют свой код в страницу, приходится учитывать. А поскольку взаимодействие с сайтом происходит через JS, то и применять CSS-свойства приходится динамически.

Итак, столкнулся я со следующей проблемой: IE не хочет корректно обрабатывать

  1. строку с CSS-expression отправленную в св-во так:
    obj.style.top = 'expression(document.getElementsByTagName("body")[0].scrollTop + "px")';
  2. так (хотя здесь проблема в ином, IE просто не применяет ничего аттрибуту style через setAttribute):
    obj.setAttribute('style', 'top: expression(document.getElementsByTagName("body")[0].scrollTop + "px")');
  3. так:
    obj.cssText = 'top: expression(document.getElementsByTagName("body")[0].scrollTop + "px");';
  4. и даже так:
    obj.className = 'pew';
    $("<style>.pew{top: expression(document.getElementsByTagName("body")[0].scrollTop + "px";}</style>").prependTo('body');

Но потом наткнулся на гайд по экспрешнам в MSDN и нашёл там решение:

Для работы с CSS-expression у IE в объекте style есть три метода (+1 для document):

  1. setExpression(property, "expression"); — присваивание экспрешна (условие пишется в кавычках);
  2. getExpression(property); — получение строки с экспрешном;
  3. removeExpression(property); — удаление экспрешна;
  4. document.recalc(true); — перерасчёт всех динамических CSS-значений текущего документа.

Таким образом спасла меня строка obj.setExpression('top', 'document.getElementsByTagName("body")[0].scrollTop + "px"');. Пользуйтесь.



  • twitter
  • rss
  • хабр
  • жежека
  • ластфм