CSSStyleSheet

Свойство document.styleSheets возвращает доступный только для чтения объект, подобный массиву, содержащий объекты CSSStyleSheet, представляющие таблицы стилей документа, как внутреннмх <style> так и внешних <link>. Если элементы <style> имеют атрибуты id, можно ссылаться на них непосредственно с помощью document.getElementById(element_id).

Синтаксис

document.styleSheets         // Получение коллекции объектов.

Комментарии

Имеется возможность создавать совершенно новые таблицы стилей и добавлять их в документ. В большинстве браузеров эта операция выполняется с помощью стандартных приемов, реализованных в модели DOM: создается новый элемент <style> и вставляется в документ в раздел <head>, затем с помощью свойства innerHTML добавляется содержимое таблицы стилей.

Однако в IE8- и в более ранних версиях новый объект CSSStyleSheet необходимо создавать с помощью нестандартного метода document.createStyleSheet(), а текст таблицы стилей добавлять с помощью свойства cssText.

Каждый объект CSSStyleSheet имеет свои свойства и методы:

cssRulesСодержит объекты типа CSSRule ( массив правил стилей )
deleteRule()Удаляет CSS-правило.
disabledПоказывает, будет ли применяться таблица стилей к текущему документу или нет.
hrefURL-адрес таблицы стилей.
insertRule()Добавляет новое CSS-правило.
mediaСписок устройств вывода, к которым применяется данная CSS-таблица.
ownerNodeЭлемент, с помощью которого данная таблица стилей была добавлена в документ.
ownerRuleПравило, которое привело к включению данной таблицы стилей.
parentStyleSheetТаблица стилей, содержащая данное правило или данную CSS-таблицу.
titleСодержит значение атрибута title.
typeСодержит информацию о MIME-типе.

IE8- не реализует правила в соответствии со стандартами. Вместо cssRules он использует rules. IE использует также removeRule вместо deleteRule и addRule(selector, rule, index) вместо insertRule.

Текущая web-страница имеет следующие таблицы стилей:

Узнать количество CSS таблиц можно с помощью свойства length:

alert (document.styleSheets.length);

cssRules

Свойство cssRules возвращает только для чтения массив объектов правил таблиц стилей. В терминологии W3C DOM эти объекты называются объектами cssRule.

Синтаксис

objStyleSheet.cssRules   // objStyleSheet - объект CSSStyleSheet

Описание, комментарии, примеры

Каждый объект cssRule имеет два изменяемых свойства:

var d = document.styleSheets[1].cssRules;
alert ( 
  'length = ' + 
     d.length + '\n' + 
  'selectorText:   ' + 
     d[2].selectorText + '\n' +
   'cssText:\n' + 
     d[2].cssText );

deleteRule()

Метод deleteRule удаляет CSS-правило с указанным индексом (index) из указанной таблицы стилей (objStyleSheet)

Синтаксис

objStyleSheet.deleteRule(index)

Примеры

var d = document.styleSheets[1].cssRules;
var s = d.length + ',  [1] = ' + d[1].cssText + '\n';
document.styleSheets[1].deleteRule(1);
alert (s + '\n' + d.length + ',  [1] = ' + d[1].cssText);

disabled

Если свойство disabled принимает значение true, таблица стилей оказывается отключенной и будет игнорироваться браузером.

Синтаксис

objStyleSheet.disabled  [ = true|false ]

Примеры

<style id="mystyle">
h1 {font-size: 36px; color: #FF3300}
p { font-family: "Times New Roman", Times, serif; color: #0000FF}
</style>

<h1>Работа с каскадными таблицами стилей</h1>
<p>С помощью этого объекта можно подключить или отключить всю таблицу, 
получить доступ к отдельным правилам, добавить или удалить правила.</p>

<button onClick="document.styleSheets[0].disabled=true"> Отключить стиль </button> 
<button onClick="document.styleSheets[0].disabled=false"> Подключить стиль </button>

href

Свойство href возвращает или изменяет URL, определённый атрибутом HREF для внешней таблицы стилей (<link>).

Синтаксис

objStyleSheet.href [ = newURL ]
newURL - новое значение атрибута HREF.

Возвращаемое значение

Строка полного или относительного URL.

Примеры

alert (document.styleSheets[0].href)

insertRule()

Метод insertRule присоединяет или вставляет правило стилей в текущий объект CSSStyleSheet. Место вставки нового правила в массиве cssRules задаётся с помощью индекса. Если вы хотите присоединить правило в конце списка, используйте в качестве параметра свойство length массива cssRules. insertRule возвращает индекс места расположения вставленного правила.

Синтаксис

objStyleSheet.insertRule(rule, index)

Параметры

rule
Строка, содержащая правило стиля в том виде, в котором оно было представлено в таблице стилей, включая селектор и фигурные скобки.
index
Дополнительное целое число, указывающее, куда новый элемент должен быть помещен в коллекции.

Пример

// <h4 id="example4" class="exclass3"> Пример </h4>
var d = document.styleSheets[1];
var len = d.cssRules.length;
var s = len + ': ' + d.cssRules[len-1].cssText;
var rule = "h4.exclass3 { color: #126534; font-size:20px; font-style: italic; background-color: #aaeeff;}"
d.insertRule(rule, len);
len = d.cssRules.length;
alert ( s + '\n' + len + ': ' + d.cssRules[len-1].cssText );

media

Свойство media возвращает / изменяет устройство вывода, к которым применяется данная CSS-таблица.

Синтаксис

objStyleSheet.media [ = strMedia ]

strMedia - любое из следующих постоянных значений как строка: all | print | screen.

Примеры

alert(document.styleSheets[0].media + '\n' + document.styleSheets[1].media);

ownerNode

Свойство ownerNode представляет собой ссылку на узел документа, в котором определяется объект CSSStyleSheet. Для тех объектов CSSStyleSheet, которые определены в элементах <STYLE> и <LINK>, данное свойство служит ссылкой на эти объекты.

Синтаксис

objStyleSheet.ownerNode

Возвращаемое значение

Ссылка на узел.

Примеры

alert (document.styleSheets[0].ownerNode.tagName + '\n' + document.styleSheets[1].ownerNode.tagName);

ownerRule

Свойство ownerRule применяется по отношению к объекту CSSStyleSheet, который был импортирован в документ с помощью правила @import. Это свойство возвращает ссылку на правило @import, отвечающее за загрузку внешней таблицы стилей.

Синтаксис

objStyleSheet.ownerRule

Возвращаемое значение

Ссылка на элемент.

parentStyleSheet

Свойство parentStyleSheet возвращает ссылку на объект CSSStyleSheet (созданный как элемент <LINK> или <STYLE>), который импортировал текущую таблицу стилей.

Синтаксис

objStyleSheet.parentStyleSheet

Возвращаемое значение:

Ссылка на объект.

Примеры

alert(document.styleSheets[0].parentStyleSheet + '\n' + document.styleSheets[1].parentStyleSheet);

title

Свойство title возвращает значение атрибута title обхекта CSSStyleSheet.

Синтаксис

objStyleSheet.title

Примеры

alert ( document.styleSheets[0].title + '\n' + document.styleSheets[1].title);

type

Свойство type возвращает значение информацию о MIME-типе..

Синтаксис

objStyleSheet.type

Возвращаемое значение

Строка - MIME-тип данных.

Примеры

alert ( document.styleSheets[0].type + '\n' + document.styleSheets[1].type);

Справочник JavaScript