У цьому випадку може застосовуватися один з трьох форм використання
ідентифікатора:
ідентифікатор;
- це ідентифікатор
тега, заданий за допомогою параметра ID , наприклад, txt у елементі <P
ID="txt">.
тих тегів, для яких допускається використання
параметра , наприклад, таких як <IMG>, <A>,
а також елементів тега <FORM>,
в якості ідентифікатора замість параметра ID можна
використовувати параметр .
Третя форма доступу до тегу за його ідентифікатором
є найбільш простий, її підтримує браузер Microsoft Internet Explorer,
але до її недоліків слід віднести те, що не всі браузери підтримують цю
форму доступу. Якщо необхідно добитися того, щоб Web-сторінка була правильно
оброблена будь-яким браузером, краще скористатися другий, більш універсальною
формою.r
звернути увагу на різниця у двох
варіантах імені тега: в лапках - "ідентифікатор" і без лапок - .
Ім'я ідентифікатора тега в лапках має строковий тип і задає саме
ідентифікатор тега, тоді як ім'я ідентифікатора тега без лапок має тип
об'єкта і задає вказівник на тег, як об'єкт.
Метод 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>
