Javascript и CSS, поддержка браузерами

Исследование поддержки браузерами Javascript объектов, взаимодействующих с CSS.

Заголовок в качестве подопытного кролика

Продолжим разговор об изменении вида Web страниц с помощью Javascript и CSS. В качестве наглядного примера предлагается с помощью кнопки «Меняем стиль» поменять значение атрибута class у вышеозначенного «подопытного» заголовка.

Как это происходит, видно из этого листинга.

HTML

<h4 id="title" class="exampl">
Заголовок в качестве подопытного кролика
</h4>
<input type="button" value="Меняем стиль" onclick="updCSS()" />

Javasctript

<script type="text/javascript">
 function updCSS() {
  if (document.getElementById("title").className=="exampl") { 
    document.getElementById("title").className = "exampl1";
  } else {
    document.getElementById("title").className = "exampl"
  };
 }  
</script>

Можно изменить класс еще проще, без кнопки, чтобы убедиться, кликните на этой фразе.

Вот как это делается.

HTML
<div id="txt" style="cursor:pointer;" onclick="updText()">
  Можно изменить класс еще проще, без кнопки, чтобы убедиться, кликните на этой фразе.
</div>
Javascript
function updText() {
  var text = document.getElementById('txt');
  text.className=(text.className==='exampl' ? 'exampl1':'exampl');
}

Но это грубая работа, т.к. для изменения 1-2 параметров элемента ему полностью заменяется атрибут «class». Для того, чтобы изменить отдельное свойство стиля, надо использовать методы объектов, приведенных в таблице1 статьи Javascript и CSS, введение.

Исследуем браузеры

Сейчас проведем небольшое исследование, попробуем выяснить, как ваш текущийй браузер поддерживает Javascript объекты, взаимодействующие с CSS.

Вы используете сейчас браузер ?

Таблица1. Перечень объектов, взаимодействующих с CSS
№ п/п	Название объекта	Тип объекта
0	style
1	CSSStyleDeclaration
2	currentStyle
3	runtimeStyle

Если попробовать заполнять эту таблицу для разных браузеров, то получится довольно пестрая картина. Например, у меня получилось для достаточно свежих версий основных браузеров такое.

Таблица2. Поддержка некоторыми браузерами взаимодействия с CSS
Браузер	style	CSSStyleDeclaration	currentStyle	runtimeStyle
IE v.8	[object CSSStyleDeclaration]	Не поддерживается	[object CSSCurrentStyleDeclaration]	[object CSSStyleDeclaration]
Firefox v.3.6	[object CSSStyleDeclaration]	[object ComputedCSSStyleDeclaration]	undefined	undefined
Opera v11.50	[object CSSStyleDeclaration]	[object CSSStyleDeclaration]	[object CSSStyleDeclaration]	undefined
Chrome v.12.0	[object CSSStyleDeclaration]	[object CSSStyleDeclaration]	undefined	undefined
Safari v5.0	[object CSSStyleDeclaration]	[object CSSStyleDeclaration]	undefined	undefined

Вот такая вот грустная получается картина, а грустная оттого, что пестрая. Мало того, что браузеров развелось, как собак на наших улицах, так еще каждая версия любого браузера может иметь свое «особое мнение».

Выводы

Не знаю, как вам, а у меня после проведенных за монитором часов на тему «Взаимодействие Javascript с CSS» поубавилось желания заниматься этим самостоятельно, зато все больше хочется переложить этот неблагодарный труд на библиотеки.

Примечание. Эта статья была написана достаточно давно, когда и браузеры были другие и стандарты, да и у меня было опыта поменьше. Поэтому хочу добавить новую фразу: «Не все так печально, скрипты могут достаточно эффективно и успешно работать с CSS стилями».

Решать, конечно, вам, при этом надо учитывать и объем работ и собственную квалификацию и отведенное на решение задачи время. Но для корректного кроссбраузерного отображения документов, когда у вас достаточно большой объем других задач и обычный цейтнот времени, на мой взгляд проще использовать, например, тот же непревзойденный jQuery, тем более, что он, я уверен, уже у вас подключен. Конечно, это не исключает необходимых знаний по этой теме, чтобы не наделать элементарных ошибок.