В этом случае может применяться одна из трех форм использования
идентификатора:
идентификатор;
где идентификатор - это идентификатор
тэга, заданный с помощью параметра ID , например, txt в тэге <P
ID="txt">.
Для тех тэгов, для которых допускается использование
параметра NAME, например, таких как <IMG>, <A>,
а также элементов тэга <FORM>,
в качестве идентификатора вместо параметра ID можно
использовать параметр NAME.
Третья форма доступа к тэгу по его идентификатору
является наиболее простой, ее поддерживает браузер Microsoft Internet Explorer,
но к ее недостаткам следует отнести то, что не все браузеры поддерживают эту
форму доступа. Если необходимо добиться того, чтобы Web-страница была правильно
обработана любым браузером, лучше воспользоваться второй, более универсальной
формой.
Необходимо обратить внимание на различие в двух
вариантах обозначения имени тэга: в кавычках - "идентификатор" и без кавычек - идентификатор.
Имя идентификатора тэга в кавычках имеет строковый тип и задает именно
идентификатор тэга, тогда как имя идентификатора тэга без кавычек имеет тип
объекта и задает указатель на тэг, как объект.
Метод document.getElementById() возвращает указатель на тэг,
и присвоив его значение переменной, например, h=document.getElementById(), можно дальше работать с
переменной h так же, как с идентификатором, указанным
в третьей форме.
Обращение к тэгам по их индификаторам для изменения
и восстановления свойств объектов показано в примере. Для этого используются функции changeTag(obj) и restoreTag(obj).
Функция changeTag(obj) вызывается по нажатию или левой, или правой клавиш мышки, т.е. по событию
Mousedown, после наведения указателя мышки на параграф с идентификатором "p1". Это происходит
потому, что именно в этот тэг помещен обработчик события. По этой же причине
параграф с идентификатором "p2" останется без изменения.
При вызове функции в качестве ее параметра
передается указатель на объект, заданный методом document.getElementById('p1') или просто
getElementById('p1'):
onMousedown="changeTag(getElementById('p1'))"
При использовании браузера Microsoft Internet Explorer в качестве параметра
функции changeTag() можно указать только имя
идентификатора:
onMousedown="changeTag(p1)"
или переменную this, которая указывает на текущий
объект:
onMousedown="changeTag(this)"
Функция changeTag(obj) выполняет следующие
действия:
- Меняет фон Web-страницы (действие, показывающее, что можно менять свойства
не только того тэга, который указан, но и всех остальных);
- Выполняет центрирование параграфа путем изменения значения HTML-параметра ALIGN;
- С помощью параметра STYLE меняет значение свойства CSS font-style;
- С помощью тэга <STYLE> меняет цвет и размер символов (значения свойств
CSS color и font-size).
Функция restoreTag(obj) вызывается по событию Contextmenu, т.е. по отжатию правой клавиши мышки при наведении указателя мышки
на параграф с идентификатором "p1".
Вызов этой функции отличается от описанного
выше вызова функции changeTag(obj) тем, что для
события Contextmenu уже существует заданный по
умолчанию обработчик события, который после действий, предусмотренных
обработчиком, заданным в тэге, будет выполнять действия по умолчанию: выводить
на экран контекстное меню. Чтобы отменить эти действия непобходимо в
обработчике после вызова функции restoreTag(obj) указать return false:
onContextmenu="restoreTag(getElementById('p1')); return false"
Функция restoreTag(obj) восстанавливает все
исходные значения свойств тэга <P> путем задания всем этим свойствам
пустых значений ("").
Просмотреть пример
<HTML>
<HEAD>
<TITLE>Изменение свойств объектов </TITLE>
<STYLE>.big_red{color:red; font:1.5cm}</STYLE>
<SCRIPT>
function changeTag(obj)//Изменение свойств параграфа
{
bod.background="back.gif";
obj.align="center";
obj.style.fontStyle="italic";
obj.className="big_red";
}
function restoreTag(obj)//Восстановление свойств
{
bod.background="";
obj.align="";
obj.style.fontStyle="";
obj.className="";
}
</SCRIPT>
</HEAD>
<BODY ID="bod">
<P ID="p1" ALIGN=left
onMousedown="changeTag(getElementById('p1'))"
onContextmenu="restoreTag(getElementById('p1'));
return false"> Текст изменяется </P>
<P ID="p2"> Текст без изменения </P>
</BODY>
</HTML>
