Добавление и удаление правил

Свойства таблиц стилей

Доступ к таблицам стилей

Введение

Динамический стиль - управление CSS с помощью JavaScript

Заключение

HTML предоставляет структуру страниц, а CSS предоставляет описание внешнего вида. А JavaScript приносит гибкость; структура HTML и стили CSS становятся динамическими.

Можно время от времени изменять внешний вид страниц и их работу, на основе того, что делают пользователи. Следующий шаг: от хорошо-продуманной и хорошо-структурированной информации к данным, которые изменяются в зависимости от требований пользователя. Можно показывать и скрывать элементы, изменять стили и внешний вид, и добавлять новый код HTML или удалять старый, когда это может потребоваться.

В данном месте раздела курса посвященного 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.