Добавляем...


Доступ к сложным правилам стилей
Мы еще не обсуждали вопросы доступа к правилам CSS в дескрипторах <style> и вопросы динамической установки внешних таблиц стилей. Модель DOM уровня 2 обеспечивает подходящий интерфейс, но ко времени создания данной книги его поддержка браузерами оставалась весьма ограниченной и содержала множество ошибок там, где она вообще имелась. Этот раздел представляет собой только краткое введение в углубленные вопросы взаимодействия DOM уровня 2 и CSS. В рамках DOM уровня 2 объект Document поддерживает коллекцию style Sheets[ ], которая может использоваться для получения доступа к дескрипторам <style> и <link>, содержащимся в документе. Так,

var firstStyleSheet = document.stylesheets[0];
или
var firstStyleSheet = document.stylesheets.item(0);

предоставляют доступ к объекту, соответствующему первому элементу <style> в документе HTML. Свойства объекта Style соответствуют атрибутам HTML подобно тому соответствию, которое мы уже наблюдали выше. Наиболее полезные свойства этого объекта приведены в таблице.

Свойство Описание
type Указывает значение type таблицы стилей, обычно это " text / css ". Предназначено только для чтения
disabled Логическое значение, указывающее активность или неактивность таблицы стилей. Допускает установку значения
href Содержит значение href таблицы стилей. Обычно не модифицируется, за исключением Internet Explorer, где можно динамически менять внешние таблицы стилей
title Содержит значение атрибута title данного элемента
media Содержит список установок mediafym данной таблицы стилей, например "screen"

В рамках DOM объект CSSStyleSheet наследует возможности объекта Style Sheet и добавляет коллекцию cssRules[ ], которая содержит различные правила стиля, а также методы insertRule() HdeleteRule() .Синтаксисом insertRule() является таблицаСтилей. insertRule ('текстПравила', индекс), где текстПравила представляет собой строку, содержащую селектор и правила таблицы стилей, а индекс задает позицию для вставки в наборе правил. Использование позиции уместно, поскольку мы имеем дело с каскадными (вложенными) таблицами стилей. Точно так же метод deleteRule() получает в качестве аргумента значение индекс и удаляет соответствующее правило, так что в результате вызова таблицаСтилей. deleteRule(0) должно быть удалено первое правило в таблице стилей, заданной значением таблицаСтилей. К сожалению, ко времени издания книги в Internet Explorer еще не поддерживались эти средства DOM, а использовались аналогичные методы addRule() и removeRule() для объекта stylesheet.

      Доступ к отдельным правилам можно осуществить посредством коллекции сss-Rules[ ] или, в Internet Explorer, с помощью нестандартной коллекции rules[ ]. Получив доступ к правилу, можно использовать его свойство selectorText, чтобы рассмотреть селектор правил, или свойство style, чтобы получить доступ непосредственно к самому набору правил. Хотя DOM уровня 2 и предлагает различные методы типа getPropertyValue() и setProperty() для изменения правил, значительно безопаснее просто получить доступ к объекту style, а затем — к свойству DOM, соответствующему нужному свойству CSS. Например, вызов таблицаСтилей. cssRules[0] .style.color = 'blue' должен изменить (или добавить) соответствующее свойство к первому правилу CSS в таблице стилей. В Internet Explorer следует использовать таблицаСтилей.rules[0].style.color = 'blue'.Следующий сценарий демонстрирует основные приемы работы с правилами таблицы стилей.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Изменения правил стиля</title>
<meta http-equiv="content-type" content="text/html; " />
<style type="text/css" id="style1">
<!--
h1 {color: red; font-size: 24pt; font-style: italic; font-family: Impact;}
p {color: blue; font-size: 12pt; font-family: Arial;}
body {background-color: white;}
strong {color: red;}
em {font-weight: bold; font-style: normal; text-decoration: underline;}
-->
</style>
</head>
<body>
<h1>Проверка возмодностей CSS</h1>
<hr />
<p>Это абзац для<strong>проверки</strong> возможностей.</p>
<p>Вот еще немного <em>импровезированного </em> текста.</p>
<p>Все ясно. Нет смысла <strong>все это продолжать</strong></p>
<hr />
<h3>Конец документа</h3>
<script type="text/javascript">
<!--
var styleSheet = document.styleSheets[0];
function modifyRule()
{
if (styleSheet.rules)
styleSheet.cssRules = styleSheet.rules;
if (styleSheet.cssRules[0])
{
styleSheet.cssRules[0].style.color='purple';
styleSheet.cssRules[0].style.fontSize = '36pt';
styleSheet.cssRules[0].style.backgroundColor = 'yellow';
}
}
function deleteRule()
{
if (styleSheet.rules)
styleSheet.cssRules = styleSheet.rules;
if (styleSheet.cssRules.length > 0) // пока есть правила
{
if (styleSheet.removeRule)
styleSheet.removeRule(0);
else if (styleSheet.deleteRule)
styleSheet.deleteRule(0);
}
}
function addRule()
{
if (styleSheet.addRule)
styleSheet.addRule("h3", "color:blue", 0);
else if (styleSheet.insertRule)
styleSheet.insertRule("h3 {color: blue}", 0);}

//-->
</script>
<form action="#" method="get">
<input type="button" value="Включить"
onclick="document.styleSheets[0].disabled=false;" />
<input type="button" value="Отключить" onclick="document.styleSheets[0].disabled=true;" />
<input type="button" value="Изменить правило" onclick="modifyRule();" />
<input type="button" value="Удалить правило" onclick="deleteRule();" />
<input type="button" value="Добавить правило" onclick="addRule();" />
</form>
</body>
</html>

Здесь имеется несколько моментов, на которые следует обратить особое внимание. Во-первых, здесь используются условные операторы для того, чтобы выяснить, существуют ли нужные объекты, например фирменные коллекции и методы Internet


добавить комментарий
(без перезагрузки и регистрации)


10 случайных разделов

Что ищем на сайте ?


Примеры кода на сайте







@ 2008-2011 Amber
При использовании материалов ссылка на сайт обязательна
Яндекс.Метрика