русс | укр

Мови програмуванняВідео уроки php mysqlПаскальСіАсемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование


Linux Unix Алгоритмічні мови Архітектура мікроконтролерів Введення в розробку розподілених інформаційних систем Дискретна математика Інформаційне обслуговування користувачів Інформація та моделювання в управлінні виробництвом Комп'ютерна графіка Лекції


Шановні українці! Матеріал був перекладений з російської мови. Тому можуть бути незначні помикли...

Доступ до об'єкту за ідентифікатором в JavaScript

У цьому випадку може застосовуватися один з трьох форм використання ідентифікатора:

  • document.all.item"ідентифікатор") чи document.all"ідентифікатор");
  • document.getElementById("ідентифікатор");
  • ідентифікатор;

    - це ідентифікатор тега, заданий за допомогою параметра 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>

  • Переглядів: 1484

    Повернутися взміст


    Онлайн система числення Калькулятор онлайн звичайний Науковий калькулятор онлайн