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, тем более, что он, я уверен, уже у вас подключен. Конечно, это не исключает необходимых знаний по этой теме, чтобы не наделать элементарных ошибок.