Работа с таблицами стилей

Оглавление

Поддержка

Доступ к таблицам стилей через коллекцию document.styleSheets и их изменение, поддерживают Internet Explorer, Gecko-браузеры (Mozilla, Firefox и т.д.), а также KHTML-браузеры (Konqueror, Safari), Opera (начиная с версии 9.0).

Общие положения

Интерфейсы, с помощью которых скрипты получают доступ на стили документа, описаны в стандарте DOM2.

У объекта document есть коллекция styleSheets, в которой хранятся объекты типа StyleSheet. Они соответствуют элементам LINK и STYLE документа и описаны в порядке их появления, начиная с 0.
document.styleSheets.length — количество таблиц стилей.
Т.е. document.styleSheets[document.styleSheets.length - 1] указывает на последний лист стилей.

Для добавления стиля достаточно создать DOM-элемент LINK или STYLE и добавить его в документ. Соответственно, для удаления стиля из коллекции styleSheets нужно удалить DOM-элемент из документа.

Особенности браузеров

Реализации Gecko и KHTML в точности следуют рекомендациям DOM2, чего, к сожалению, нельзя сказать об Internet Explorer.

DOM (Gecko, KHTML)

Коллекция правил содержится в объекте CSSStyleSheet и называется cssRules.
document.styleSheets[0].cssRules.length - количество правил в листе стилей.
Объект правила - CSSRule, имеет свойства type, cssText, parentRule и parentStyleSheet (ссылка на таблицу стилей, в которой описано это правило)
У объекта styleSheet имеются так же методы insertRule и deleteRule.

stylesheet.insertRule(rule, index)
строка rule — описание правила, например "div .bold { font-weigth: bold }".
число index — номер в коллекции, которое займёт это правило.

stylesheet.deleteRule(index)
число index — номер правила, которое следует удалить.

Internet Explorer

Коллекция правил содержится в объекте styleSheet и называется rules.
document.styleSheets[0].rules.length - количество правил в листе стилей.
Объект правила — rule, имеет свойства selectorText, cssText и style (с ним можно работать так же, как и с обычным объектом style, например, у тега div).
У объекта styleSheet имеются так же методы addRule и removeRule.

styleSheet.addRule(selector, style [, index])
строка selector — селектор, например "div b" или "#top".
строка style — описание стиля, например "color: #000" или "border: 1px solid #F00".
число index — номер в коллекции, которое займёт это правило. По умолчанию равно -1 (т.е. правило добавляется в конец).

styleSheet.removeRule( [index])
число index — номер правила, которое следует удалить (по умолчанию удаляет первое).

Абстрактные функции

Функции, делающие работу с таблицами стилей проще, и убирающие зависимость от браузеров.

Возвращение стиля по индексу:

function getStyleSheet(index)
{
  // Проверяем параметр
  if (typeof index == 'undefined')
    index = 0;
  if (index < 0)
    index = document.styleSheets.length + index;
  if (typeof document.styleSheets == 'undefined' || index < 0
      || index >= document.styleSheets.length)
    return null;

  // Находим стиль
  var style = document.styleSheets[index];

  // Делаем объект совместимыми с W3C DOM2 (для IE)
  return StyleSheet_makeCompatible(style);
}

//
// Примеры вызова
//

// Находим первый стиль в документе
var style = getStyleSheet(0);
// Находим последний стиль
var style2 = getStyleSheet(-1);

Добавление новой таблицы стилей:

function addStyleSheet(url)
{
  // Создаём элемент LINK/STYLE и добавляем в документ
  var style;
  if (typeof url == 'undefined')
  {
    style = document.createElement('style');
  }
  else
  {
    style = document.createElement('link');
    style.rel = 'stylesheet';
    style.type = 'text/css';
    style.href = url;
  }
  document.getElementsByTagName('head')[0].appendChild(style);

  // Находим новый стиль в коллекции styleSheets
  style = document.styleSheets[document.styleSheets.length - 1];

  // Делаем объект совместимыми с W3C DOM2 (для IE)
  return StyleSheet_makeCompatible(style);
}

//
// Примеры вызова
//

// Создаём пустой стиль
var style = addStyleSheet();
// Загружаем CSS-файл (доступа к объекту не будет до полной загрузки)
var style2 = addStyleSheet('/styles/additional_style.css');

Функции, реализующие совместимось IE с W3C DOM2:

function StyleSheet_makeCompatible(style)
{
  // Mozilla не даёт доступа к cssRules до загрузки стиля
  try
  {
    style.cssRules;
  }
  catch (e)
  {
    return style;
  }

  // Создаём CSSStyleSheet.cssRules
  if (typeof style.cssRules == 'undefined' && typeof style.rules != 'undefined')
    style.cssRules = style.rules;

  // Создаём CSSStyleSheet.insertRule и CSSStyleSheet.deleteRule
  if (typeof style.insertRule == 'undefined' && typeof style.addRule != 'undefined')
    style.insertRule = StyleSheet_insertRule;
  if (typeof style.deleteRule == 'undefined' && typeof style.removeRule != 'undefined')
    style.deleteRule = style.removeRule;

  // Проверяем, существуют ли все нужные свойства
  if (typeof style.cssRules == 'undefined' || typeof style.insertRule == 'undefined'
      || typeof style.deleteRule == 'undefined')
    return null;
  else
    return style;
}

function StyleSheet_insertRule(rule, index)
{
  // Выделяем селектор и стиль из параметра
  if (rule.match(/^([^{]+)\{(.*)\}\s*$/))
  {
    this.addRule(RegExp.$1, RegExp.$2, index);
    return index;
  }
  throw "Syntax error in CSS rule to be added";
}

//
// Примеры вызова
//

var style = addStyleSheet();
// Вставляем правило в конец таблицы стилей
style.insertRule('div {color: blue}', style.cssRules.length);
// Вставляем дополнительное правило перед первым
style.insertRule('div#special {color: red}', 0);
// Показываем количество правил в новой таблице стилей
alert(style.cssRules.length);

var style2 = getStyleSheet(0);
// Удаляем первое правило из первой таблицы стилей документа
style2.removeRule(0);
// Удаляем последнее правило
style2.removeRule(style2.cssRules.length - 1);

Варианты

css.cgi?element=h1&color=#abcdef