Оглавление
Поддержка
Доступ к таблицам стилей через коллекцию document.styleSheets и их изменение, поддерживают Internet Explorer, Gecko-браузеры (Mozilla, Firefox и т.д.), а также KHTML-браузеры (Konqueror, Safari), Opera (начиная с версии 9.0).
Общие положения
Интерфейсы, с помощью которых скрипты получают доступ на стили документа, описаны в стандарте DOM2.
У объекта document есть коллекция styleSheets, в которой хранятся объекты типа StyleSeet. Они соответствуют элементам 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