Динамическое изменение внешнего вида страницы
Как видите, изначально мы присвоили переменной-флагу vis значение 0, чтобы в первый же момент надпись МИГАЛОК не исчезала (при первом запуске функции теперь элемент будет видим). В конце функции мы используем задержку в 400 миллисекунд и рекурсивный вызов той же функции.
Давайте посмотрим, как будет выглядеть вся страница.
<HTML> <BODY> <H2>Производство <DIV ID="mig" STYLE="text-decoration: blink; visibility: visible;">МИГАЛОК</DIV> и цветомузыкальных установок.</H2> <P>Наша фирма является уникальным явлением на всем земном шаре. Вы спросите, почему? Подождите немного,скоро вы это сами поймете, если вам удастся дочитать этот текст до конца. Если же вам не удастся это сделать, то когда-нибудь вы очень сильно пожалеете об этом, говоря себе: а вот было оно совсем рядом, а я упустил его... Это мы про что, как вы думаете?</P> <P>Итак, решено: вы, во что бы то ни стало, дочитываете этот текст до конца. (ДАЛЕЕ ИДЕТ КАКОЙ-НИБУДЬ ДЛИННЫЙ И СКУЧНЫЙ ТЕКСТ...)</P> <SCRIPT LANGUAGE="JavaScript"> //<!-- if (navigator.appName != "Netscape") blink it(); //--> </SCRIPT></BODY> </HTML>Выбор изменяемых свойств
Кстати, использование переменной-флага дает нам возможность легко переделать это мигание во что-нибудь другое. Например, вместо временного исчезновения надписи можно на это время включать выворотку, то есть взаимно поменять цвет текста и цвет фона. Как мы уже говорили, получив доступ к элементу (например, через метод document.all), мы можем легко изменить любое его свойство. Вот, например, как можно организовать мигание с вывороткой:
function blink it() { if (vis = 1) { document.all.mig.style.backgroundColor = "#OD160E" document.all.mig.style.color = "#F9FFF9"; vis = 0; } else { document.all.mig.style.backgroundColor = "#F9FFF9"; document.all.mig.style.color = "#OD160E"; vis = l; } setTimeout("blink_it()", 400); }Результат (в момент включения выворотки) показан на рис. 6.7. Обратите внимание на то, что стилевые свойства, которые пишутся через дефис в нашем примере это background-color), при доступе из сценария необходимо писать без дефиса, но заменив букву, идущую после дефиса, на прописную. Так, background-color превращается в backgroundColor, font-size в fontSize, border-style в borderStyle и т. д. Кстати говоря, чтобы получить тот результат, который показан на рис. 6.10, нам пришлось добавить еще одно свойство нашему мигающему элементу:
<H2>Производство <DIV ID="mig" STYLE="text-decoration: blink; width: 7em; visibility: visible;">МИГАЛОК</DIV> и цветомузыкальных установок.</H2>…а именно: мы установили ширину элемента. Если этого не сделать, цвет фона будет меняться на этой строке по всей ширине экрана.
Рис. 6.7. Мигание заголовка может осуществляться разными способами, в том числе и вывороткой
Доступ к элементам страницы через метод document.all – вещь очень удобная. К сожалению, такая возможность на 100% поддерживается только в браузере Internet Explorer. Что касается браузеров Netscape, то доступ к любому элементу там появился только в шестой версии, но синтаксис его отличается от рассмотренного выше. Вместо documental.имя_элемента для Netscape 6 нужно писать document.getElementByld("имя_элементa"). А в более ранних версиях Netscape доступ обеспечивается только к некоторым элементам страницы: рисункам (document.images), ссылкам (document.links), якорям (document.anchors), элементам управления и внедренным объектам (document.applets), формам (document.forms), объектам, внедренным с помощью тега <EMBED> (document.embeds), а также слоям, которые в Netscape организовывались с помощью тега <LAYER> (через document.layers). При этом, правда, все равно можно присваивать этим элементам уникальные имена и затем использовать их для обращений, например, так:
<A NAME="colored">Какой-то текст</A> <SCRIPT> document.anchors.colored.style.color = "red"; </SCRIPT>При этом некоторые версии Netscape позволяют опустить слово style, а при доступе к слоям – и слово layers.
Эти отличия несколько затрудняют создание страниц, которые бы хорошо смотрелись и в Internet Explorer, и в Netscape. Однако всегда можно проверить из сценария тип и версию браузера, после чего написать различные блоки кода для разных браузеров. В некоторых особо сложных случаях можно даже написать отдельные страницы для разных типов браузеров, и организовать перенаправление на них (пример такого перенаправления был приведен в разделе 6.1). В любом случае не забывайте проверять, как веб-страница смотрится в браузерах других типов. Сложно, конечно, поддерживать совместимость со всеми браузерами, но даже если ориентироваться на какой-нибудь один из них, все равно иногда стоит немного подкорректировать код так, чтобы пользователи других браузеров увидели хоть что-то более или менее похожее. Кстати, в этой книге большинство примеров ориентированы на браузер Internet Explorer версии 4 и выше.