16.6.3. Создание новых таблиц стилей
Наконец, имеется возможность создавать совершенно новые таблицы стилей и добавлять их в документ. В большинстве броузеров эта операция выполняется с помощью стандартных приемов, реализованных в модели DOM: создается новый элемент <style> и вставляется в документ в раздел <head>, затем с помощью свойства innerHTML добавляется содержимое таблицы стилей. Однако в IE8 и в более ранних версиях новый объект CSSStyleSheet необходимо создавать с помощью нестандартного метода document.createStyleSheet(), а текст таблицы стилей добавлять с помощью свойства cssText. Пример 16.6 демонстрирует создание новых таблиц:
Пример 16.6. Создание новой таблицы стилей
// Добавляет таблицу стилей в документ и заполняет ее указанными стилями.
// Аргумент styles может быть строкой или объектом. Если это строка.
// она интерпретируется как текст таблицы стилей. Если это объект, то каждое
// его свойство должно определять правило стиля, добавляемое в таблицу.
// Именами свойств являются селекторы, а их значениями - соответствующие стили
function addStyles(styles) {
// Сначала необходимо создать новую таблицу стилей
var styleElt, styleSheet;
if (document.createStyleSheet) { //Если определен IE API, использовать его
styleSheet = document.createStyleSheet();
}
else {
var head = document.getElementsByTagName("head")[0]
styleElt = document.createElement("style"); // Новый элемент <style>
head.appendChild(styleElt); // Вставить в <head>
// Теперь новая таблица находится в конце массива
styleSheet = document.styleSheets[document.styleSheets.length-1]
}
// Вставить стили в таблицу
if (typeof styles === "string") {
// Аргумент содержит текстовое определение таблицы стилей
if (styleElt)
styleElt.innerHTML = styles;
else
styleSheet.cssText = styles; // IE API
}
else {
// Аргумент - объект с правилами для вставки
var і = 0;
for(selector in styles) {
if (styleSheet.insertRule) {
var rule = selector + {" + styles[selector] + "}";
styleSheet.insertRule(rule, i++);
}
else {
styleSheet.addRule(selector, styles[selector], i++);
}
}
}
}