Изменение свойств элемента
До сих пор в качестве обработчика события мы использовали только две команды: document.write() или window.alert(), однако возможности JavaScript на этом далеко не ограничиваются. С помощью JavaScript можно изменять CSS-свойства и атрибуты любого HTML-элемента.
Обозначение html-элемента с помощью идентификатора
С помощью одной команды JS можно изменить только одно свойство одного HTML-элемента. Мы уже сталкивались с необходимостью выделять (селектировать) HTML-элементы для того, чтобы применить к ним CSS-свойство, записанное в головной части документа. Для этого мы использовали селектор тега и селектор класса. Однако здесь это не подходит, так как JS изменяет только один HTML-элемент.
Для выбора HTML-элемента, подлежащего изменению, в открывающий тег добавляют специальный атрибут id с уникальным значением (от identifier — идентификатор). Например:
<p id="цвет">Здесь должен быть красный текст.</p>
Значение идентификатора не должно повторяться в других тегах. Другими словами, значение идентификатора должно быть уникальным. Идентификатор нужно ставить обязательно в те теги, которые должны меняться при выполнении скриптов.
Доступ к свойствам html-элемента
Как мы знаем, в HTML-элементе может быть разнообразные атрибуты: width, height, style, value и другие. В атрибуте style могут быть разнообразные CSS-свойства: color, border, font-size, padding-left и другие. Пример: <span style="font-style:oblique">Текст</span>
Поэтому в выбранном с помощью идентнификатора HTML-элементе нужно указать, какой атрибут и какое CSS-свойство мы хотим менять. Основой для обращения к любому HTML- элементу является объект document.
Рассмотрим новый метод этого объекта.
Метод getElementById возвращает указатель на HTML-элемент, имеющий заданный идентификатор. Рассмотрим следующий пример:
<p id="цвет">Здесь должен быть красный текст.</p> <script type="text/javascript"> document.getElementById('цвет').style.color = '#ff0000'; </script>
Эта команда работает следующим образом. В документе отыскивается элемент с идентификатором цвет, затем происходит обращение к атрибуту style и обращение к его CSS-свойству color, которому присваивается значение #ff0000. Таким образом, мы имеем доступ к любому CSS-свойству.
Задание 1
Используя HTML-коды, создайте заголовок h1 с текстом “Привет!” и присвойте ему идентификатор. Напишите сценарий, который бы окрашивал его в коричневый цвет.
В предыдущем задании CSS-свойство изменялось при загрузке страницы, то есть автоматически без участия пользователя. Дадим возможность пользователю самому менять цвет элемента. Разместим на странице кнопку, при щелчке на которой меняется цвет параграфа: <p id="цвет">Здесь должен быть красный текст.</p> <input type="button" value="Изменить цвет" onclick="document.getElementById('цвет').style.color = '#ff00ff'"/>
|
Рис. 1. Изменение одного элемента с помощью другого |
На рис. 1. показано, что в одном HTML-элементе задано поведение, благодаря которому изменяется другой HTML-элемент.
Задание 2
Используя HTML-коды, создайте блок div с текстом “Цвет изменяется кнопкой”. Добавьте кнопку, щелчок по которой окрашивает текст в синий цвет.
Программист часто использует в своей работе готовые скрипты, скачанные, например, из Интернета (citforum.ru/internet/javascript/exgraph.shtml — изменение картинки). Поэтому нужно уметь читать чужой код.
Задание 3
Проанализируйте приведённые ниже скрипты. Не копируя и не запуская их в браузере, ответьте на вопрос: что изменится при щелчке на кнопке?
Примеры скриптов
1. |
<p id="5">Здесь должен быть красный текст.</p> <input type="button" value="Щёлкни" onclick="document.getElementById('5').style.border = '#00FF00 ridge 5px'"/> |
2. |
<p id="identifier">Какой-то текст.</p> <input type="button" value="Щёлкни" onclick="document.getElementById('identifier').style.fontSize = '36px'"/> |
3. |
<p id="текст">Прыгающий текст</p> <input type="button" value="Щёлкни" onclick="document.getElementById('текст').style.paddingLeft = '100px'"/> |
Здесь мы должны познакомиться с ещё одной особенностью JavaScript. Дело в том, что символ дефиса в именах переменных и свойств использовать нельзя. Поэтому составные CSS-свойства записываются следующим образом. Свойство пишется слитно без дефиса, но второе слово пишется с большой буквы. Пример назначения цвета рамки: document.getElementById('имя').style.borderColor='red';