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


Объект Style
Управлять представлением областей содержимого, определенных с помощью <div> или каких-то других дескрипторов, используемых с той же целью, лучше всего с помощью свойств объекта Style (соответствующего содержимому атрибута style элемента). Объект Style открывает доступ к атрибутам CSS соответствующего объекта, тем самым обеспечивая возможность управления визуальными характеристиками содержимого, такими как шрифт, цвет или размер. Рассмотрим следующий простой эффект изменения изображения, основанный на изменении характеристик текста:

<а href="http://www.google.com" onmouseover="this.style.fontWeight='bold';"
onmouseout="this.style.fontWeight='normal';">Укажите на меня!</а>

Когда пользователь помещает указатель мыши на ссылку, шрифт изменяется на полужирный (что эквивалентно указанию CSS font-weight: bold), а при смещении указателя со ссылки шрифт переключается в прежний режим. Это напоминает идеи из раздела, посвященного изменяемой графике, но здесь вместо изменения источника изображения изменяются свойства CSS объекта. Можно таким образом установить любое свойство CSS, если, в соответствии с правилами создания имен, взять имя свойства CSS и, исключив дефисы, перевести в верхний регистр начальные буквы присоединенных слов, чтобы получить свойство JavaScript/DOM. Так, свойство font-style CSS превращается в свойство fontStyle JavaScript, background-image превращается в backgroundlmage, font-size — в fontSize и т. д.
Для иллюстрации широких возможностей управления представлением объектов, рассмотрите следующий пример, в котором представление региона изменяется в результате щелчка на нем.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DHTML, основанный на стандартах</title>
<meta http-equiv="content-type"
content="text/html; charset=windows-1251" />
<script language="JavaScript" type="text/javascript">
<!--
var prevObj; // чтобы восстановить стиль предыдущего элемента
function handleClick(е)
{
if (!е)
var е = window.event;
// e обеспечивает доступ к событиям во всех браузерах
// если элементы изменены в результате щелчка, восстановить их
if (prevObj)
{
switchAppearance(preyObj);
}
if (e.target) // DOM
{
prevObj = e.target;
switchAppearance(e.target);
}
else if (e.srcElement) // IE
{
prevObj = e.srcElement;
switchAppearance(e.srcElement);
}
}

function switchAppearance(obj)
{
obj.style.backgroundColor = ((obj.style.backgroundColor == "lightblue") ? ("") : ("lightblue"));
// IE не может обработать унаследованное значение, поэтому передается пустое.
// Рамка вокруг полей формы делает форму аккуратнее
if (obj.tagName.toLowerCase() != "input")
{
if (obj.style.borderStyle.indexOf("solid") != -1)
{
obj.style.borderStyle = "none";
obj.style.borderWidth = "Opx";
}
else
obj.style.borderStyle = "solid";
obj.style.borderWidth = "lpx";
}
}
)
// Регистрация событий DOM
if (document.addEventListener)
document.addEventListener("click", handleClick, true);
// Регистрация событий IE
if (document.attachEvent)
document.attachEvent("onclick",handleClick);
//-—>
</script>
</head>
<body>
<h2>Щелкните в любом месте документа, чтобы выделить регион содержимого. </h2>
<br /><br />
<р style="float: left;">Содержимое, сдвинутое влево.</р>
<р style="float: right;clear: none; ">Содержимое, сдвинутое вправо.</р>
<br clear="all"/><hr />
<form action="#" method="yet">
Это форма.<br />
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
</form>
<р>Еще один абзац.</p>
</body>
</html>

В этом примере изменяется цвет фона и границы регионов, определенных средствами (X)HTML. Польза данного примера заключается не только в том, что он демонстрирует изменение стиля в связи с событиями, но и в том, что он показывает внутренние связи разметки и структуры CSS, присущие любому документу.
Этот пример иллюстрирует два очень важных момента. Во-первых, становится ясным, что для использования DHTML с целью управления видом страниц требуются достаточно глубокое понимание CSS. Иначе придется ограничиться использованием атрибутов элементов (X)HTML, а не их объектов Style. Во-вторых, свойства объектов Style содержат значения CSS, но эти значения могут обеспечивать не то, что вы ожидаете. В качестве примера рассмотрим следующий программный код JavaScript:

<р id="mypara">Oй!</p>
<script type="text/javascript">
document.getElementById("mypara").style.borderWidth = 3;
alert(document.getElementById("mypara").style.borderWidth);
</script>

Во-первых, заметим, что здесь мы задали ширину границы числовым значением без указания единицы измерения. В случае использования border-width мы должны указать единицу измерения явно и передать соответствующее значении в виде строки, а не полагаться на неявное преобразование типов:

document.getElementById("mypara").style.borderWidth = "Зрх";

Но еще более интересным является то, что в браузерах на базе Mozilla border-width на самом деле является сокращением, указывающим применение соответствующего значения ко всем четырем сторонам границы, поэтому Mozilla и показывает не одно, а четыре значения. Как видите, при установке свойства объекта Style, значение анализируется так, будто оно указано в таблице стилей. Поэтому браузер, как правило, добавляет все отсутствующие или подразумеваемые правила CSS (например, единицы измерения "рх"), которые вы можете пропустить, или, в некоторых случаях, игнорировать соответствующие значения. Хорошее понимание CSS здесь действительно необходимо, а если ваши знания в области CSS недостаточны, то при работе со свойствами Style можете воспользоваться следующими рекомендациями, чтобы уменьшить вероятность возникновения проблем:
  • Старайтесь не использовать свойства Style для хранения информации о состоянии. Например, если вы хотите сохранить информацию о том, что цвет фона изменился на красный, используйте для этого специальную переменную (может быть, свойство экземпляра объекта Style), а не выводите заключение о состоянии из style.color. Это избавит вас от необходимости отслеживать непредвиденные значения, которые может генерировать браузер.
  • Если необходимо выяснить свойства Stylе, используйте для этого подстроки и/или регулярные выражения, а не прямое сравнение с помощью операций типа ==. В результате уменьшится вероятность возникновения ошибок преобразования типов и проблем, связанных со свойствами, значения которых задаются браузером.
  • Устанавливайте свойства Style в виде строки, и эти строки должны быть как можно более конкретными. Например, вместо style. borderWidth = 2 используйте style.borderWidth = "2рх". Это уменьшит риск возникнивения ошибок и увеличит совместимость с менее снисходительными pеализациями СSS-JavaScript.


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


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

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


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







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