Регулярные выражения
Регулярные выражения являются разновидностью мини-языка-программирования, созданного для решения проблемы "синтаксического анализа" текста - например, ответить на вопросы типа "появляется ли данная строка внутри другой строки?" и "в строке 'abc123def' какие имеются цифры между 'c' и 'd'?" Они являются очень мощным инструментом, но также достаточно сложным. Ниже находится описание, для чего предназначены регулярные выражения; пока, однако, можете принять это на веру, и вернуться к описанию позже.
Используемое в этом примере регулярное выражение имеет вид /#(.*)$/. Каждый символ регулярного выражения создан для представления последовательности символов в некоторой целевой строке, идея состоит в том, чтобы выразить по частям, как составлена целевая строка.
/ … / - косая черта указывает начало и конец регулярного выражения, также как двойные или одиночные кавычки используются для "строки"
# - хэш-символ (#) фактически означает "совпадает с хэш-символом"
( … ) - скобки означают "здесь находится часть строки, которая понадобится позже"
.* - означает "любые символы"; на самом деле это точка (.), означающая "один любой символ", за которой следует звездочка (*), означающая "повторить любое количество раз"
$ - знак доллара означает "конец строки"
Поэтому наше регулярное выражение описывает "подходящий шаблон" строки, состоящей из "хэша, за которым следуют любые символы". link.href является местом назначения рассматриваемой ссылки (например, #tab1, и так как эта строка подходит под описание "хэш, за которым следуют любые символы"), то "подходящий шаблон" применим к этой строке.
link.href.match(our_regexp), вернет, поэтому, результат true, а не false; в действительности будет возвращен массив из двух элементов ["#tab1", "tab1"]. Первый является текстом, который соответствует всему регулярному выражению, а второй является текстом, соответствующим символам в кавычках, поэтому скобки здесь и присутствуют - чтобы пометить эту часть строки как "этот фрагмент нас интересует". tab1 является строкой, которая нам требуется, поэтому мы можем извлечь ее из возвращаемого массива (это второй элемент, поэтому его извлекает индекс [1] - массивы начинают нумерацию с нуля.)
Соединение работающего кода со страницей
Как упоминалось выше, имеется две части кода: часть, которая фактически выполняет работу, и часть, которая соединяет ее с HTML. Соединение работающего кода с HTML осуществляется с помощью событий. В данном конкретном примере мы используем два события: событие загрузки окна, которое используется, чтобы сказать "все начинается", и событие щелчка на списке вкладок, которое запускается, когда пользователь щелкает на вкладке. Когда загружается страница, требуется выполнить код соединения, а код соединения должен соединить событие щелчка на вкладке с кодом выше, который отображает соответствующую вкладку.
Выполнение кода в ответ на событие делается в большинстве браузеров с помощью функции addEventListener, и с помощью функции attachEvent в Internet Explorer. Здесь мы создаем функцию "оболочку", которая делает правильный выбор, в зависимости от того, что поддерживается:
addEvent: function(obj, type, fn) {
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );};
obj.attachEvent('on'+type, obj[type+fn] );
} else {
obj.addEventListener( type, fn, false );
}
}
(Не беспокойтесь слишком много о том, как это работает; примите пока просто на веру - вы поймете код лучше, когда станете более опытным пользователем JavaScript.) Эта функция получает три параметра, obj, type, и fn, которые являются соответственно "объектом, порождающим событие", "интересующим нас событием ", и "функцией, которая выполняется при возникновении события". При загрузке страницы необходимо выполнить нашу функцию tabify.init; функция tabify.init затем позаботится о присоединении события click для каждой вкладки.
addEvent(window, "load", tabify.init);
Как можно видеть из структуры кода HTML выше, множество вкладок в действительности представляется как упорядоченный список с class="tablinks". Поэтому функция tabify.init должна сделать следующее:
Найти все элементы <ol> на странице с классом tablinks
Соединить с событием click каждого элемента <ol> некоторый код, который делает следующее:
Точно определяет, на какой ссылке вкладки щелкнул пользователь
Определяет, какая реальная вкладка соответствует этой ссылке вкладки
Показывает эту одну вкладку
Скрывает все остальные вкладки
Функция init, которая все это делает, выглядит следующим образом:
init: function() {
var ols = document.getElementsByTagName("ol");
for (var i=0; i<ols.length; i++) {
var ol = ols[i];
if (!/(^|\s)tablinks(\s|$)/.test(ol.className)) { continue; }
tabify.addEvent(ol, "click", function(e) {
var target = window.event ? window.event.srcElement : e.target;
if (target.nodeName.toLowerCase() === "a") {
tabify.hideAllTabs(e.target.parentNode.parentNode);
tabify.setTabFromLink(e.target, "block");
if (e) e.preventDefault();
if (window.event) window.event.returnValue = false;
return false;
}
}, true);
tabify.hideAllTabs(ol);
tabify.setTabFromLink(ol.getElementsByTagName("a")[0], "block");
}
}
Давайте пройдем по этой функции шаг за шагом, просматривая по очереди, что делает каждая часть:
var ols = document.getElementsByTagName("ol");
for (var i=0; i<ols.length; i++) {
var ol = ols[i];
if (!/(^|\s)tablinks(\s|$)/.test(ol.className)) { continue; }
}
Этот фрагмент находит все элементы <ol> на странице с классом tablinks - и затем извлекает список всех <ol> и для каждого проверяет "если этот элемент не имеет класс 'tablinks', пропустить его". (Проверка класса делается с помощью регулярного выражения; continue означает "пропустить этот элемент и перейти к следующему".)
tabify.addEvent(ol, "click", function(e) {
...
});
Этот фрагмент присоединяет некоторый код к событию click каждого <ol>.
var target = window.event ? window.event.srcElement : e.target;
Этот фрагмент точно определяет, на какой ссылке вкладки щелкнул пользователь …
tabify.setTabFromLink(e.target, "block");
…затем этот фрагмент, показывает эту единственную вкладку …
tabify.hideAllTabs(e.target.parentNode.parentNode);
… и наконец, эта строка скрывает все другие вкладки.
Функции setTabFromLink и hideAllTabs также присутствуют в коде; они используют показанные выше методы для скрытия или отображения вкладки. Посмотрите на то, как они работают - они являются отдельными функциями, так как часто полезно иметь блок кода, который вызывается более чем из одного места, и поместить его в отдельную функцию. (Это облегчает понимание кода и позволяет повторно использовать его в нескольких местах. Этот подход часто называют "разбиением" или "факторизацией" кода в функцию.)
В ней выполняется также небольшая "дополнительная" работа, которая демонстрирует добавление и удаление атрибутов. Функция setTabFromLink не только отображает соответствующую вкладку, но задает также class="active" на активной вкладке. Она делает это с помощью трех вспомогательных функций: hasClass, removeClass, и addClass. Таким же образом, как мы скрыли все вкладки, а затем показали активную, мы используем removeClass для удаления "active" из className всех ссылок на вкладки, а затем addClass, чтобы добавить "active" в одну ссылку на вкладку, которая действительно активна. Простое добавление класса в ссылку может показаться бессмысленным - в конечном счете классы невидимы - но это зацепка для стилевого оформления. Мы можем (и должны) делать так, чтобы ссылки с class="active" появлялись с другим оформлением, добавляя код CSS:
ol.tablinks li a {
background-color: red;
}
ol.tablinks li a.active {
background-color: white;
}
Поэтому теперь "активная" вкладка выводится белой, в то время как другие вкладки будут красными. Использование JavaScript для добавления и удаления классов является очень распространенной техникой, которую вы должны использовать, где возможно; CSS хорошо подходит для управления компоновкой, расположением и внешним видом элементов HTML, и поэтому использование JavaScript для изменения классов этих элементов означает, что они могут приобретать различные стили CSS. Это будет идеальным объединением; JavaScript делает элементы динамическими, но фактически сам изменяет очень немного. Добавьте просто класс и предоставьте CSS возможность выполнить остальную работу.
Создание HTML
Однако сценарии для DOM значительно более мощный инструмент, чем просто средство для изменения свойств CSS существующего HTML. Можно также динамически создавать новый код HTML, который никогда не присутствовал на странице с самого начала. Например, на сайте новостей технологии Slashdot, ссылка в комментариях выводит место назначения ссылки в квадратных скобках, поэтому ссылка вида <a href="http://opera.com"> A web browser </a> будет выводиться как <a href="http://opera.com">A web browser</a> [opera.com]. (Это было сделано, чтобы исключить использование фальшивых ссылок, направляющих пользователя в нежелательное место.) Добавление этого небольшого кода HTML, выводящего домен места назначения каждой ссылки на странице, легко делается с помощью JavaScript.
Создание новых элементов HTML делается с помощью функции document.createElement. Для этого примера нужно добавить только одну вещь: после каждой ссылки мы добавляем span, содержащий текст, указывающий домен ссылки (посмотрите страницу linkify.html (http://dev.opera.com/articles/view/creating-and-modifying-html/linkify.html) содержащую действующий пример). Код HTML примера выглядит следующим образом:
<p id="start">This is some text that has
<a href="http://www.w3.org/TR/html4/struct/links.html">links</a> in it
to various places, including <a href="http://www.opera.com">Opera</a>,
<a href="http://www.bbc.co.uk/">the BBC</a> and an internal link to
<a href="#start">the beginning of this section</a>. All the external links
should have <span>[domain]</span> after them.</p>
Код JavaScript выглядит следующим образом:
<script type="text/javascript">
var linksuffix = {
addEvent: function(obj, type, fn) {
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );};
obj.attachEvent('on'+type, obj[type+fn] );
} else {
obj.addEventListener( type, fn, false );
}
},
init: function() {
var links = document.getElementById("linksuffixtext").getElementsByTagName("a");
for (var i=0; i<links.length; i++) {
var matches = links[i].href.match(/^http:\/\/(.*?)\//);
if (matches) {
var linkdomain = matches[1];
var span = document.createElement("span");
var spantext = document.createTextNode(" ["+linkdomain+"]");
span.appendChild(spantext);
links[i].parentNode.insertBefore(span, links[i].nextSibling);
}
}
}
};
linksuffix.addEvent(window, "load", linksuffix.init);
</script>
Часть сценария, которая выполняет здесь работу, имеет следующий вид:
var links = document.getElementsByTagName("a");
for (var i=0; i<links.length; i++) {
var matches = links[i].href.match(/^http:\/\/(.*?)\//);
if (matches) {
var linkdomain = matches[1];
var span = document.createElement("span");
var spantext = document.createTextNode(" ["+linkdomain+"]");
span.appendChild(spantext);
links[i].parentNode.insertBefore(span, links[i].nextSibling);
}
}
Этот код разбивается следующим образом:
var links = document.getElementsByTagName("a");
for (var i=0; i<links.length; i++) {
...
}
Сначала он находит все ссылки (getElementsByTagName("a")) в документе
var matches = links[i].href.match(/^http:\/\/(.*?)\//);
if (matches) {
...
}
Эта строка использует регулярное выражение на каждой ссылке, чтобы определить, что место назначение начинается с http://что-то/. Если это так …
var linkdomain = matches[1];
var span = document.createElement("span");
var spantext = document.createTextNode(" ["+linkdomain+"]");
span.appendChild(spantext);
… следующая часть сначала получает "домен ссылки", часть www.opera.com ссылки. Затем с помощью document.createElement создается элемент <span>. Затем создается "textNode" ("текстовыйУзел"). В то время как сами элементы HTML создаются с помощью document.createElement, весь текст в документе HTML фактически содержится в "textNode", и их необходимо создать отдельно. Нет необходимости беспокоиться об этом (или даже знать об этом) при написании реального HTML, но нужно знать об этом при создании элементов с помощью сценария DOM. Текст в textNode является фактически " [домен]", созданный конкатенацией (соединением вместе) строк. Наконец, эта часть использует метод appendChild элемента <span>, чтобы поместить textNode внутрь span.
links[i].parentNode.insertBefore(span, links[i].nextSibling);
Эта строка добавляет span в документ. В этом месте span является ссылкой на элемент HTML, который выглядит следующим образом:
<span> [example.com]</span>
Этот элемент, однако, не является частью документа. Он не является пока частью никакого документа, он просто находится в некоторой неопределенности. Добавление элемента в документ можно сделать одним из двух способов: используя appendChild как выше, или используя insertBefore. Функция appendChild добавляет наш элемент в конце существующего элемента (именно поэтому она называет append). Так как мы хотим добавить ее в середине существующего элемента, нам нужно использовать insertBefore. Вспомните, что наш текущий фрагмент кода HTML выглядит примерно следующим образом:
<p>... text that has
<a href="http://www.w3.org/TR/html4/struct/links.html">links</a> in it
to ...
Это приводит к дереву DOM, показанному на рисунке 9.1:
Рис. 9.1. Дерево DOM tree перед добавлением элемента span после ссылки
Мы хотим вставить новый span между <a> и textNode "in it to", чтобы он появлялся после <a>. Это приведет к дереву DOM как на рисунке 9.2.
увеличить изображение Рис. 9.2. Дерево DOM после добавления элемента span
или, более просто, коду HTML следующего вида
<p>... text which has
<a href="http://www.w3.org/TR/html4/struct/links.html">links</a>
<span> [domain]</span> in it to ...
Здесь было бы удобно иметь возможность сказать: "вставьте новый span после ссылки". К сожалению функции insertAfter нет. Вместо этого мы должны вставлять его перед элементом после ссылки (несколько запутано, но подумайте об этом, и все встанет на место). Краткая запись для выражения "вещь после элемента помеченного el" будет el.nextSibling. Функция insertBefore должна вызываться на элементе, в который происходит вставка, т.е. на предке <p> ссылки, легко доступной с помощью link.parentNode. Поэтому весь вызов, как выше, будет
links[i].parentNode.insertBefore(span, links[i].nextSibling);
То есть, находим предка (<p>) ссылки, которая обрабатывается (links[i]) в данный момент, и вставляем созданный элемент span перед элементом после ссылки (links[i].nextSibling). Использование HTML в виде дерева DOM таким образом и вставка новых элементов в него, может вначале вызывать непонимание, но скоро все становится понятным при достаточной практике.
Заключение
HTML предоставляет структуру страниц, а CSS предоставляет описание внешнего вида. А JavaScript приносит гибкость; структура HTML и стили CSS становятся динамическими.
Можно время от времени изменять внешний вид страниц и их работу, на основе того, что делают пользователи. Следующий шаг: от хорошо-продуманной и хорошо-структурированной информации к данным, которые изменяются в зависимости от требований пользователя. Можно показывать и скрывать элементы, изменять стили и внешний вид, и добавлять новый код HTML или удалять старый, когда это может потребоваться.
§ Динамический стиль - управление CSS с помощью JavaScript
Введение
В данном месте раздела курса посвященного JavaScript вы уже рассмотрели реальные основы использования JavaScript, посмотрели, как находить элементы, используя DOM, и увидели, как манипулировать ими, если они были успешно найдены.
В этой лекции мы рассмотрим, как динамически обновлять использованное для элементов стилевое оформление, изменяя код CSS во время выполнения с помощью JavaScript. Для этого используется такая же техника, которую мы уже видели, но имеется несколько специальных соображений, о которых необходимо помнить при работе с CSS DOM. Эти вопросы будут рассмотрены в следующей последовательности:
Доступ к таблицам стилей
Свойства таблиц стилей
Добавление и удаление правил
Изменение стилей элементов
Имена классов элементов
Заключение
Контрольные вопросы
Доступ к таблицам стилей
Браузер предоставляет интерфейс для взаимодействия с таблицами стилей - в коде JavaScript можно получить доступ к списку таблиц стилей, используя document.styleSheets. Свойство document.styleSheets возвращает список всех таблиц стилей, примененных к странице, включая внешние таблицы стилей, на которые ссылается элемент link, и внутренние таблицы стилей, расположенные внутри элементов style. Если элементы style имеют атрибуты id, можно ссылаться на них непосредственно с помощью document.getElementById(element_id).
Можно также добавлять на страницу новые таблицы стилей - вы можете использовать функцию document.createElement для создания новых элементов style. Это будет полезно, когда вы хотите предоставить посетителям сайта возможность динамически изменять стили сайта, используя, возможно, некоторые управляющие кнопки. Вот небольшой пример, как можно создать новую таблицу стилей:
var sheet = document.createElement('style');
sheet.innerHTML = "div {border: 2px solid black; background-color: blue;}";
document.body.appendChild(sheet);
Удаление таблицы стилей также выполняется очень просто. Сначала необходимо получить таблицу стилей, которую вы хотите удалить. Это можно сделать, используя document.getElementById, как показано в небольшом примере ниже. Чтобы удалить таблицу стилей, можно использовать функцию DOM parent.removeChild(element), где element является объектом таблицы стилей, которую необходимо удалить, а parent является узлом предком таблицы стилей. Как показано в примере ниже, чтобы удалить таблицу стилей (sheetToBeRemoved), вы сначала получаете предка таблицы стилей - var sheetParent = sheetToBeRemoved.parentNode - а затем вызываете removeChild с аргументом sheetToBeRemoved - sheetParent.removeChild(sheetToBeRemoved)
var sheetToBeRemoved = document.getElementById('styleSheetId');
var sheetParent = sheetToBeRemoved.parentNode;
sheetParent.removeChild(sheetToBeRemoved);
Пример доступа к таблицам стилей (http://dev.opera.com/articles/view/dynamic-style-css-javascript/accessingstylesheets.html) показывает, как доступ ко всем таблицам стилей, так и добавление и удаление новой таблицы стилей на странице.
Свойства таблиц стилей
В JavaScript имеется объект stylesheet, который позволяет получить доступ к информации о таблице стилей, на которую ссылается текущая web-страница, такую как отключена она или нет, ее местоположение, и список правил CSS, которые она содержит. Полный список свойств объекта stylesheet (и многих других вещей также) можно найти в документации W3C по DOM таблиц стилей (Document Object Model Style Sheets - http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html).
Давайте рассмотрим (в данный момент) теоретический пример - пусть имеется web-сайт, где представлена серия технических статей. Мы хотим привлечь внимание к некоторым из этих статей с помощью интересной анимированной карусели, но как быть с пользователями, у которых JavaScript не включен по каким-то причинам? Вспоминая полученные знания о ненавязчивом JavaScript, мы хотим, чтобы функции Web-сайта также работали для этих пользователей, но мы можем захотеть оформить сайт для этих пользователей по другому, чтобы им было удобно использовать сайт, даже без карусели.
Мы хотим иметь таблицу стилей, которая активируется, только если активируется JavaScript. Нам повезло - интерфейс DOM таблиц стилей предоставляет нам доступ к атрибуту disabled, который позволяет включать и выключать таблицы стилей.
Большинство свойств объекта stylesheet предназначены только для чтения, но некоторые, такие как disabled, можно изменять.
Можно также использовать свойства таблиц стилей, чтобы различать несколько таблиц стилей на странице. Свойство src может помочь идентифицировать внешние таблицы стилей, но не может указать внутренние элементы стиля. Лучший способ, который позволяет ссылаться как на внутренние, так и на внешние таблицы стилей по отдельности, состоит в использовании свойства title. При последовательном просмотре document.styleSheets можно различать таблицы стилей, использованные на странице. Следующий пример показывает, как это можно реализовать:
function getStyleSheet(unique_title) {
for(var i=0; i<document.styleSheets.length; i++) {
var sheet = document.styleSheets[i];
if(sheet.title == unique_title) {
return sheet;
}
}
}
Для каждого объекта stylesheet, извлеченного из массива styleSheets, можно получить доступ к его свойству title, чтобы проверить, что оно содержит заголовок, который требуется найти. Действующий пример этого можно видеть в примере по добавлению и удалению правил, который рассматривается в следующем разделе.
Переключение между различными таблицами стилей на основе предпочтений пользователей является достаточно общим свойством web-сайтов - используя, рассмотренные до сих приемы можно задать несколько таблиц стилей и использовать только те, которые текущий посетитель сайта хотел бы увидеть. Давайте посмотрим на реальный пример - вначале оформляется текст, но когда атрибут disabled задается как true, определенный нами CSS будет отключен. Можно снова легко включить CSS, задавая disabled как false. Посмотрите пример со свойствами таблиц стилей (http://dev.opera.com/articles/view/dynamic-style-css-javascript/stylesheetproperties.html), чтобы увидеть, как это можно использовать.
Добавление и удаление правил
Вспомните рассмотренный выше теоретический демонстрационный сайт. Предположим, что этот сайт имеет список статей, некоторые из них посвящены CSS, некоторые HTML, а некоторые JavaScript. На нашей web-странице мы показываем все статьи одновременно, но наш пользователь хочет видеть статье только о CSS. Как это можно сделать? Так как все статьи уже показаны, мы не хотим снова обращаться к серверу, чтобы получить страницу, содержащую статьи только о CSS - это пустая трата времени.
Для решения этой проблемы можно использовать JavaScript, чтобы пройти в цикле по всем статьям и сделать видимыми только статьи о CSS (это будет показано позже), либо добавить правило в одну из таблиц стилей, которое будет делать видимыми только статьи о CSS. Использование CSS будет в действительности быстрее, чем обход всех элементов.
Объект stylesheet имеет две функции, которые помогают решить эту проблему. Первой является функция insertRule, которая выглядит следующим образом:
stylesheet.insertRule(rule,index)
где rule будет строкой, содержащей правило, которое мы хотим добавить в таблицу стилей. index определяет, где в списке правил таблицы стилей должно помещаться это правило. Вот как это может выглядеть.
stylesheet.insertRule(".have-border { border: 1px solid black;}", 0);
Я создал пример, чтобы показать, как используется функция insertRule. В этом примере есть список всех правил в таблице стилей. Когда нажимается кнопка, то добавляется правило с индексом 2, которое делает текст красным, добавляя свойство color: red в правило p { ... }. Посмотрите пример добавления и удаления правил (http://dev.opera.com/articles/view/dynamic-style-css-javascript/addingandremovingrules.html).
Если требуется удалить это правило, можно вызвать функцию stylesheet.deleteRule(index), где index будет индексом правила, которое будет удалено.
В примере демонстрации статей можно создать правило, которое делает свойство display равным none для всех статей о HTML и JavaScript - посмотрите в примере карусели (http://dev.opera.com/articles/view/dynamic-style-css-javascript/carousel.html), чтобы увидеть это в действии.
Примечание: IE не реализует правила в соответствии со стандартами. Вместо атрибута cssRules он использует rules. IE использует также removeRule вместо deleteRule и addRule(selector, rule, index) вместо insertRule.
Изменение стилей элементов
Теперь вы должны понимать, как редактировать таблицы стилей, соединенные со страницей, и создавать и модифицировать в них правила CSS. Что делать, если вы захотите изменить определенный элемент в DOM? Используя DOM API можно получить доступ к определенным элементам страницы. Возвращаясь к примеру карусели можно видеть, что функции определены таким образом, что при щелчке на статье эта статья выделяется, в то время как основной текст статьи выводится ниже.
С помощью DOM мы получаем доступ к объекту style, который описывает стиль документа. Этот объект style определен как CSSStyleDeclaration; подробное объяснение этого можно найти в документации W3C по интерфейсу CSSStyleDeclaration (http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration). Объект style работает не совсем так, как некоторые другие свойства, определенные в элементе HTML. В отличие от element.href или element.id, которые возвращают строки, element.style возвращает объект. Это означает, что невозможно задать стиль, присваивая строку для element.style.
Объект style имеет атрибуты, которые соответствуют различным заданным свойствам CSS. Например, style.color возвращает заданный на элементе цвет. Выполняя element.style.color = "red"; можно динамически изменять стиль. Ниже показана функция, которая превращает цвет элемента в красный, когда ей передается id элемента.
function colorElementRed(id) {
var el = document.getElementById(id);
el.style.color = "red";
}
Можно также использовать setAttribute(key, value) для задания стиля элемента. Например, задать цвет элемента как красный, вызывая на элементе element.setAttribute('style', 'color: red');, но будьте осторожны, так как это удаляет любые изменения, сделанные в объекте style.
Когда стиль элемента задается таким образом, то это то же самое, как если бы мы задавали его как объявление атрибута style элемента html. Этот стиль будет применяться только в том случае, когда важность и специфичность правила будут больше, чем другие примененные к элементу правила (специфичность объясняется в лекции 28 о наследовании и каскадировании CSS).
У некоторых из вас может возникнуть вопрос, что происходит, когда заданное свойство CSS имеет дефис. В этом случае синтаксис должен быть другой, так как, например, если написать element.style.font-size, JavaScript будет пытаться вычесть size из записи element.style.font, что будет совершенно не то, что требуется. Чтобы исключить эту проблему, все свойства CSS записаны в верблюжьей нотации (CamelCase). Как показано ниже, необходимо писать element.style.fontSize, чтобы получить доступ к размеру шрифта элемента. Например:
function changeElement(id) {
var el = document.getElementById(id);
el.style.color = "red";
el.style.fontSize = "15px";
el.style.backgroundColor = "#FFFFFF";
}
Помните объекты таблиц стилей? Свойство styleSheet.cssRules возвращает список объектов style, представляющих все правила CSS, содержащиеся в таблице стилей. Эти объекты style можно использовать также как объекты style для других элементов. В этом случае вместо изменения одного определенного элемента на странице, изменения здесь будут изменять все элементы, к которым применяются правила CSS.
В примере ниже функция увеличения текста использует объект style, а функция уменьшения текста использует setAttribute. Если текст задан красным цветом, а затем вызывается setAttribute с кнопкой уменьшения текста, то можно заметить, что изменения будут переопределены. Посмотрите действующий пример изменения стилей элементов (http://dev.opera.com/articles/view/dynamic-style-css-javascript/changingelementstyles.html).
Имена классов элементов
Другой способ изменения стиля элемента состоит в изменении его атрибута class. class является зарезервированным словом в JavaScript, поэтому, чтобы получить доступ к классу элемента, мы используем element.className. Можно присоединять строки к className, если требуется добавить класс к элементу, или можно просто перезаписать className и задать ему совершенно новый класс. Посмотрите пример с именами классов элементов (http://dev.opera.com/articles/view/dynamic-style-css-javascript/elementclassnames.html).
Заключение
Умение динамически изменять стили, применяемые на странице, является крайне полезным для создания современных, насыщенных интерактивным взаимодействием Web-страниц - знания, представленные в этой лекции формируют основу более развитых методов, таких как анимация в JavaScript. Необходимо просто позаботиться о том, чтобы использовать модификации стилей ответственно, и не использовать их чрезмерно. Как мы также обсудили выше, модификации стилей могут улучшить эффективность взаимодействия с Web - отображение и скрытие контента может помочь избежать при некоторых обстоятельствах ненужных обращений к серверу.
§ Обработка событий с помощью JavaScript