Глаза страшат, а руки делают

Внедрение кода JavaScript в таблицу стилей CSS


Среди значений стилей CSS есть значение expression:

селектор {свойство: expression(выражение)}

Выражение — программный код, определяющий особенности стиля. Например, на языке JavaScript.

Для чего это нужно?

Бывает ситуация, когда какая-нибудь стилевая мелочь в разных браузерах ведёт себя по-разному.

Вот один пример. Решил я поместить под основным блоком декоративный блок — полосочку с градиентной заливкой:

<style type="text/css">
#last {
  position: relative;
  width: 100%;
  height: 60px;
  top: 0px;
  background: url(img/fonbtm.jpg) repeat-x top;
}
</style>

Когда я поместил внизу страницы <div id="last">, то в Мозилле и Опере всё было нормально, а «Осёл» упёрся и сделал перед ним отступ (методом «тыка» я установил, что это 14 px).

Итак, можно отказаться от определения стиля и ввести вместо тэга <div id="last"> следующий код:

<script type="text/javascript">
if (!document.all) // то есть НЕ "ОСЁЛ"
document.write("<div style='position: relative; width: 100%; height: 60px; top: 0px; background: url(img/fonbtm.jpg) repeat-x top;'></div>")
else
document.write("<div style='position: relative; width: 100%; height: 60px; top: -14px; background: url(img/fonbtm.jpg) repeat-x top;'></div>")
</script>

Это работает.

НО:

Длинно. Тавтологично. Неизящно. И вставлять это нужно на многих одинаковых страницах.

Среди всех свойств стиля нужно программно изменить одно значение, и желательно — один раз.

Допустим, сделаем файл last.js:

if (!document.all) // то есть НЕ "ОСЁЛ"
document.write(" top: 0px;")
else
document.write(" top: -14px;")

Теперь прицепим его к нужным страницам, а в HTML запишем:

<div style="position: relative; width: 100%; height: 60px; background: url(img/fonbtm.jpg) repeat-x top;
<script type="text/javascript" src="last.js"></script>
"></div>

Запись, конечно, бредовая, напоминает какой-то сюрреалистический текст. Хотя, как ни странно, и это работает. Но всё-таки давайте будем выражаться культурно и поместим это разночтение в стиль CSS.

Как это делается?

Сформировывается нужное выражение и записывается в круглых скобках после определения свойства expression. Это именно программное выражение, а не просто текст, поэтому то, что было в последнем скрипте, нам не подойдёт.

Определяем наш стиль, доходим до top и начинаем думать.

<style type="text/css">
#last {
  position: relative;
  width: 100%;
  height: 60px;
  background: url(img/fonbtm.jpg) repeat-x top;
  top: ...

Нам нужно определить свойство top стиля CSS для элемента с id=last.

То есть:

document.getElementById('last').style.'top'

Значит:

if (!document.all) // то есть НЕ "ОСЁЛ"
document.getElementById('last').style.'top' = '0px';
else
document.getElementById('last').style.'top' = '-14px';

Или короче, в одну строку:

!document.all ? document.getElementById('last').style.top='0px' : document.getElementById('last').style.top=style.top='-14px'

Теперь можно перенести это в свойство expression.

Полностью стиль будет выглядеть так:

<style type="text/css">
#last {
  position: relative;
  width: 100%;
  height: 60px;
  background: url(img/fonbtm.jpg) repeat-x top;
  top: expression(!document.all ? document.getElementById('last').style.top='0px' : document.getElementById('last').style.top=style.top='-14px');
}
</style>


 006269