|
Глава 2. Изменение стилей различных объектов
В этой
главе продолжается ознакомление с различными способами изменения стилей
различных объектов. Как мы уже выяснили, Dynamic HTML позволяет менять различные
аттрибуты объектов, например, аттрибут SRC у объекта <IFRAME> или STYLE у
объекта <DIV>.
В этой
главе вы сможете найти информацию по следующим вопросам:
Объект
<IFRAME> позволяет вставлять в текущий документ окно, в котором будет
содержаться частью или полностью другой документ HTML. Путь, по которому
находится вставленный документ, указан в свойстве SRC объекта IFRAME. Изменив
его, вы сможете менять содержимое этого объекта. Но это еще не все. Так же, как
вы обращаетесь к объектам главного докумета, вы можете обращаться к объектам и
вставленного докумета. В доказательство, вот вам следующий пример, который
иллюстрирует, как изменять содержимое объекта IFRAME и изменять цвет фона
вставленного документа, не зависимо от его текущего содержимого.
<HTML>
<HEAD>
<SCRIPT
LANGUAGE="JScript">
function change_image() {
document.all.myiframe.src=981/"frame_content2.html";
}
function
change_background() {
document.frames.myiframe.document.body.style.backgroundColor="green";
}
</SCRIPT>
</HEAD>
<BODY>
<IFRAME id=myiframe
src=981/IFRAME>
<P onclick="change_image()"
style="cursor: hand; color='blue'">
Изменение содержимого IFRAME
</p>
<P onclick="change_background()"
style="cursor: hand; color='blue'>
Изменение фона IFRAME
</P>
</BODY>
</HTML>
Для совершения вышеуказанных действий написаны две
функции.
Первая - change_image() - изменяет содержимое объекта
IFRAME. Обратите внимание, что этому объекту присвоено имя myiframe.
Обратите внимание, как происходит доступ к объекту. Строка
document.all.myiframe служит именно для этого. По
своей сути она является путем, где главным в иерархии стоит document, через все
его объекты (all) выходят непосредственно на myiframe, ну а уж у него используют
свойство src. Да, и еще надо оговорится, что с самого начала подразумевается
существование двух неких файлов HTML: frame_content.html и
frame_content2.html,
которые являются источниками для IFRAME. Сначала, в объекте находится
содержимое frame_content.html, а потом, после щелчка на соответствующую строчку,
используется файл frame_content2.html.
Когда пользователь нажмет на вторую строчку в основном
документе, заработает функция change_background(). Она также использует иерархию
доступа к объектам, чтобы изменить фон документа, который находится в IFRAME.
Заметьте, что функция меняет фон второго документа, а не фон самого объекта
IFRAME.
У второй функции также нет параметров, но вы можете
поэкспериментировать, передавая ей значение цвета, на который вы хотите изменить
фон. Тогда ее вызов будет выглядеть примерно так:
onclick="change_background('цвет')", а в самой функции надо произвести
следующие изменения:
function change_background(color) {
document.frames.myiframe.document.body.style.backgroundColor=color;
}
Теперь color пишется без кавычек, потому-что это не
название цвета, а имя переменной, аргумента функции. В качестве этого аргумента
вы можете передавать любое корректное название цвета. Я же говорил, что функции
позволяют действовать очень гибко!
В первой главе вы познакомились с понятием классов, как
объединений аттрибутов объекта. В этой главе мы продолжаем их обсуждение.
Есть два способа задания стиля объекта: первый - это
напрямую, например,
this.style.color='red' или
document.all.myHeading.style.fontSize='20px'. Все это
примеры прямого доступа к свойству объекта.
Второй способ - это использование классов. Используя их,
вы можете задать сразу несколько строк. Так почему классы? Когда у вас на
странице есть множество объектов примерно одинакового назначения, вы можете
использовать для них глобальные стилевые установки, применяя для всех этих
объектов один стиль. Каждый объект имеет аттрибут, который связывает его с
определенным классом. Через этот аттрибут легко задать стиль объекта,
сопоставляя его определенному классу. Кроме того, вы можете динамически изменять
аттрибут класса, соответственно меняя стиль объекта.
В этом примере показано, как можно производить
динамическую смену класса.
<HTML>
<HEAD>
<STYLE>
.textRed {color:red}
.textBlack
{color:black}
</STYLE>
</HEAD>
<BODY>
<H1 class=textBlack onmouseover="this.className='textRed'"
onmouseout="this.className='textBlack'">
Наведи на меня мышь, чтобы посмотреть, как классы динамически
меняются
</H1>
</BODY>
</HTML>
Определено два класса под именами textRed и textBlack.
При инициализации, объекту <H1> присваивается класс textBlack, обратите
внимание, что в этом случае используется аттрибут class, а имя класса пишется
без кавычек. Это происходит потому, что этот код является частью языка HTML, а
вот когда имя класса надо сменить, в двойных кавычках находится часть
Script-языка, поэтому используется аттрибут className, и имя класса пишется в
одинарных кавычках.
С помощью классов вы можете менять все аттрибуты стиля
за исключением позиционирования (position). Вы не можете определить стиль
позиционирования: абсолютный или непозиционированный иначе, как через прямой код
HTML.
О значениях свойств
Когда вы присваиваете значения аттрибутам, помните, что
эти значения всегда - строки. Поэтому, вы не можете манипулировать значениями
свойств в математическом смысле. И специально для этого было введено несколько
свойств, значения которых - целые числа.
Например, свойство pixelHeight - целое число. Оно
отображает в пикселах значение аттрибута height. posHeight - также целое число.
Оно отображает свойство height в величине, в которой автор страницы задал это
свойство.
Если свойство предполагает некоторое разнообразие
величин, вы можете указывать величину, в которой вводите значение. В следующих
примерах используются величины points и pixels. Они задаются соответственно
указателями pt и px. document.all.MyElement.style.fontSize = "24pt";
document.all.MyElement.style.fontSize = "120px";
Если вы не задаете указатель, используется значение по
умолчанию. Есть одно преимущество этого: вы можете указать значение свойства,
как целое число. Две следующие строки идентичны:
document.all.MyElement.style.fontSize = "72";
document.all.MyElement.style.fontSize = 72;
| 
