Исследование поддержки браузерами 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.
Вы используете сейчас браузер ?
№ п/п | Название объекта | Тип объекта |
---|---|---|
0 | style | |
1 | CSSStyleDeclaration | |
2 | currentStyle | |
3 | runtimeStyle |
Если попробовать заполнять эту таблицу для разных браузеров, то получится довольно пестрая картина. Например, у меня получилось для достаточно свежих версий основных браузеров такое.
Браузер | 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, тем более, что он, я уверен, уже у вас подключен. Конечно, это не исключает необходимых знаний по этой теме, чтобы не наделать элементарных ошибок.