3. Изменение атрибутов элемента
Изменение самого себя
До сих пор при возникновении события в одном элементе мы изменяли другой элемент (рис. 1 на предыдущей странице). Например, при щелчке на параграфе менялся список, при щелчке на кнопке менялся блок div. А как быть, если нужно менять тот же самый элемент, в котором произошло событие? Можно, как обычно, поставить идентификатор в тег этого элемента и обращаться к нему через getElementById. Пример: <p id="сам" onmousemove="document.getElementById('сам').style.background='#0066CC'" >Не задень меня! </p> Здесь параграф реагирует на наведение мыши и сам себя изменяет. Но есть более изящный способ записи того же самого действия.
Операция this (этот) возвращает указатель на текущий объект. Эта операция широко применяется в обработчиках событий HTML для указания на объект, вызвавший данное событие. Пример: <p onmousemove="this.style.background='#0066CC'">Не задень меня! </p> Как видите, запись стала намного короче и понятнее.
|
Рис. 1. Изменение элементом самого себя |
На рис. 1. показано, что HTML-элемент изменяет сам себя.
Задание 1
В предыдущем задании добавьте реакцию параграфа на наведение курсора, при котором шрифт становится наклонным, а при уходе курсора шрифт принимает обычный вид.
Изменение размера элемента (атрибуты width и height)
В предыдущих примерах мы получали доступ к CSS-свойству через атрибут style. Логично предположить, что если мы укажем название другого атрибута, то получим доступ к его значению. Рассмотрим следующий пример.
<input type="button" value="Шире" onClick="document.getElementById('tab').width='750';"> <table border="1" cellspacing="0" cellpadding="3" id="tab"> <tr> <td>На маленьком плоту...</td> <td>Ну и пусть будет нелегким мой путь...</td> </tr> </table>
Этот код в действии
На маленьком плоту сквозь бури, дождь и грозы, Взяв только сны и грезы, и детскую мечту, Я тихо уплыву, лишь в дом проникнет полночь, Чтоб рифмами наполнить мир, в котором я живу. |
Ну и пусть будет нелегким мой путь, Тянут ко дну боль и грусть, Прежних ошибок груз. Но мой плот, свитый из песен и слов, Всем моим бедам назло Вовсе не так уж плох. |
В обработчике события с помощью метода getElementById происходит обращение к таблице по её идентификатору tab, затем к её ширине width и задаётся новое значение 700.
Таким образом, осуществляется доступ к любому атрибуту.
Задание 2
Разместите на странице картинку и две кнопки: “Крупно” и “Обычно”. Одна из них должна увеличивать картинку вдвое, а другая — возвращать прежний размер.
Сдвиг картинки
Мы уже знаем, что картинку можно позиционировать на любое место страницы с помощью CSS-свойств position, left и top. Поэтому нетрудно догадаться как написать скрипт, изменяющий положение картинки. Проанализируйте приведённый скрипт и ответьте, где окажется картинка при щелчке на кнопке? <img src="flower.jpg" id="im" /> <input type="button" value="Сдвиг" onclick="document.getElementById('im').style.position='absolute'; document.getElementById('im').style.left='0'; document.getElementById('im').style.top='0';" />
Заметьте, когда записываются несколько команд подряд, они разделяются точкой с запятой.
Задание 3