Справочник по JavaScript : Объект style : Объект style в Navigator. JavaScript-стили

Материал из Справочник Web-языков

• Главная
• JavaScript
• Тематический указатель
• Объект style
• Объект style в Navigator. JavaScript-стили

Navigator поддерживает прямое обращение по идентификаторам только для объектов layer и не поддерживает коллекцию all. Да и поддержка атрибута ID в нем реализована так себе, в основном, для присвоения элементам стилей. Но объект document Navigator предусматривает четыре очень мощьных свойства для работы со стилями.

Свойство classes позволит вым получить доступ к отдельному поименованному стилю:

document.classes.{Имя стиля}.{Имя тега}|all.{Имя свойства}

Здесь {Имя тега} может быть именем любого тега. Если нужно определить стиль для всех тегов, используйте слово all.

Например, предположим, что вы определили в таблице стилей некий стиль:

.somestyle {color: green}

Тогда в коде скрипта вы можете получить к нему доступ:

document.classes.somestyle.all.fontFamily = "Arial";

Аналогично вы можете определить какой-либо стиль для одного определенного тега:

P.somestyle {color: green}
document.classes.somestyle.P.fontFamily = "Arial";

В свою очередь свойство ids позволит вам получить доступ к стилю, присвоенному отдельному идентификатору ID:

document.ids.{Идентификатор}.{Имя свойства}

Например:

#someid {color: green}
document.ids.someid.fontFamily = "Arial";

Но что делать, если вы переопределили стиль какого-либо тега? В этом случае воспользуйтесь свойством tags:

document.tags.{тег}.{Имя свойства}

Например:

H1 {color: green}
document.tags.H1.fontFamily = "Courier";

А если вам нужно, скажем, изменить стиль элемента <B>, находящегося внутри заголовка второго уровня? Для этого существует свойство contextual:

document.contextual({Контекст 1}[, {Контекст 2}[, ...]]).{Имя свойства}

Тогда для описанного нами случая:

document.contextual(document.tags.H2, document.tags.B).fontStyle=
    "oblique";

что аналогично заданию в таблице стилей

H2 B {font-style: oblique}

Но если вы думаете, что можете динамически изменять внешний вид элементов страницы в Navigator путем изменения их стилей, вы жестоко ошибаетесь. Реально объект style нужен Navigator только для поддержки нового вида таблиц стилей, так называемых JavaScript-стилей.

JavaScript-стили отличаются от обычных тем, что больше всего похожи на скрипты. Собственно, это и есть скрипты. Давайте рассмотрим два примера: обычной таблицы стилей и таблице JavaScript-стилей:

<STYLE type="text/css">
P {color: blue}
.bigtext {font-size: 72pt; font-weight: boldest}
H1 B {text-decoration: underline}
</STYLE>

Это обычная таблица стилей. Теперь преобразуем ее в таблицу JavaScript-стилей:

<STYLE type="text/javascript">
document.tags.P.color = "blue";
width (document.classes.bigtext.all) {
  fontSize = "72pt";
  fontWeight = "boldest"; }
document.contextual(document.tags.H1, document.tags.B).textDecoration = 
    "underline";
</STYLE>

Теперь вы видете, как таблица JavaScript-стилей похожа на скрипт. Заметьте также, что в этом случае атрибут type обязателен, т.к. он указвывает тип таблицы стилей.

Во всех предыдущих примерах для Navigator мы всегда приводили ссылку на объект document. Но в таблицах JavaScript-стилей ее можно опустить.

<STYLE type="text/javascript">
tags.P.color = "blue";
width (classes.bigtext.all) {
  fontSize = "72pt";
  fontWeight = "boldest"; }
contextual(tags.H1, tags.B).textDecoration = "underline";
</STYLE>