Доступ к элементам HTML по имени
Однако, во-первых, не очень удобно высчитывать номер элемента на стра- нице, а во-вторых, описанным выше способом мы можем получить дос- туп не ко всем элементам. Рассмотрим такой пример. Предположим, мы создаем веб-страницу для сайта фирмы, производящей мигалки, и поэтому нам обязательно хочется, чтобы в заголовке соответствующее слово мигало. Мы даже уже написали заготовку:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<ТITLЕ>Мигающий зaгoлoвок</TITLE>
<STYLE> BODY { background-color: #F9FFF9;
color: #OD160E; } H2 {
text-align: center; } P { text-indent: 3em;
} </STYLE>
</HEAD>
<BODY>
<Н2>Производство <ВR>МИГАЛОК<ВR> и цветомузыкальных установок </Н2>
<Р>Наша фирма является уникальным явлением на всем земном шаре. Вы спросите, почему? Подождите немного, скоро вы это сами поймете, если вам удастся дочитать этот текст до конца. Если же вам не удастся это сделать, то когда-нибудь вы очень сильно пожалеете об этом, говоря себе: а вот было оно совсем рядом, а я упустил его... Это мы про что, как вы думаете?</Р>
<Р>Итак, решено: вы, во что бы то ни стало, дочитываете этот текст до конца. (ДАЛЕЕ ИДЕТ КАКОЙ-НИБУДЬ ДЛИННЫЙ И СКУЧНЫЙ ТЕКСТ...)</Р>
</BODY>
</HTML>
Результат работы этой заготовки показан на рис. 6.6. Итак, проблема в том, чтобы заставить мигать слово “МИГАЛОК”. Ну, разумеется, можно применить стилевое свойство text-decoration: blink; или просто тег
<BLINK>
, но ни то, ни другое не поддерживается броузером Internet Explorer. Как же быть?
Прежде всего, надо выделить слово МИГАЛОК в отдельный элемент. Поскольку оно находится на отдельной строке, можно использовать тег
<DIV>:
<Н2>Производство <DIV>МИГАЛOK</DIV> и цветомузыкальных установок.</Н2>
Чтобы иметь возможность управлять этим элементом, нужно дать ему уникальное имя, установив атрибут ID=:
<Н2>Производство <DIV ID="mig">МИГАЛOK</DIV> и цветомузыкальных установок.</Н2>
Теперь, если у пользователя броузер Netscape, можно сразу установит! мигающий стиль:
<Н2>Производство <DIV ID="mig" STYLE="text-decoration: blink;>МИГАЛOK</DIV> и цветомузыкальных установок.</Н2>
Рис. 6.6. Предварительная заготовка для веб-страницы с мигающим заголовком