Книга: JavaScript. Подробное руководство, 6-е издание

16.6.3. Создание новых таблиц стилей

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++);
      }
    }
  }
}

Оглавление книги


Генерация: 1.698. Запросов К БД/Cache: 0 / 0
поделиться
Вверх Вниз