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

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

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

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

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

HTML

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

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>

Пояснение. При клике на кнопке она находит элемент разметки с id=»title» и заменяет CSS класс этого элемента с помощью функции updCSS().

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

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

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

Здесь же при клике на элементе с помощью функции updText() сразу меняется CSS класс элемента.

Важное замечание. Приведенных скриптов недостаточно для модификации CSS стилей элементов. Кроме этого браузеру надо указать, какой код надо выполнить при клике на элементе разметки. Другими словами, мы должны указать, какой обработчик надо запускать для обработки события click. В нашем случае по событию окончания построения модели DOM DOMContentLoaded мы и назначаем эти обработчики с помощью нижеприведенного кода. Его можно размещать в любом месте — хедере или футере документа.

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById("change_class").addEventListener('click', updCSS);
    document.getElementById("txt").addEventListener('click', updText);
});

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