Рассылка закрыта
При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.
Вы можете найти рассылки сходной тематики в Каталоге рассылок.
Азы и секреты программирования на JavaScript.
| Информационный Канал Subscribe.Ru |
Ссылка на архив предыдущих выпусков: http://subscribe.ru/ Статистика рассылки: http://subscribe.ru/ Полный справочник по языкам сценариев: http://www.b-soft.ru/scripting/ В предудущих выпусках мы начали разговор о работе с объектами и их событиями в броузере. Продолжим тему. Свойства элемента и свойства стиля Кроме задания атрибутов элемента, что является обычным способом управления их выравниванием, появлением и т.д., есть и другой путь. Все видимые элементы на странице имеют также свои объекты style, что с тем же успехом может быть использовано для управления их внешним видом. Объект style можно использовать для поиска, определения и динамического изменения свойств стиля элементов в коде страницы, отображаемой броузером - от размера и цвета шрифтов до расположения на экране текста и графики. Вот пример обычного оформления заголовка: <H2 ID=MyHeading style="font-family:Arial; color:red; font-size:48"> Текст заголовка</H2> Можно еще и выровнять текст заголовка тем-же способом, более того, этот прием рекомендован Интернет-консорциумом для новой версии HTML 4.0 (а не использованием тега <center></center>): <H2 ID=MyHeading style="font-family:Arial; color:red; font-size:48; text-align:center;"> Текст заголовка</H2> Теперь мы можем при помощи JavaScript получить значения указанных свойств объекта style. Хочу напомнить, что если Вы не задали какое-то свойство стиля явно, то при запросе из JavaScript Вы получите пустую строку, а не значение, используемое броузером по-умолчанию. Проиллюстрируем сказанное примером. Создадим простенькую страничку с заголовком, реагирующим на щелчек мышки по нему:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<HEAD><TITLE>Обработка событий</TITLE></HEAD>
<BODY>
<H2 ID=MyHeading style="font-family:Arial; color:red; font-size:48; text-align:center;">
Щелкни здесь!</H2>
<SCRIPT LANGUAGE=JAVASCRIPT FOR=MyHeading EVENT=onclick>
alert("Выравнивание текста: \"" + this.style.textAlign + "\"");
alert("Расстояние между буквами: \"" + this.style.letterSpacing + "\"");
</SCRIPT>
</BODY></HTML>
Как Вы увидите, после щелчка мышкой по заголовку, в первом окне сообщения появится значение явно заданного свойства "text-align", а во втором окне, вместо ожидаемого значения расстояния между буквами (свойство "letter-spacing"), использемого броузером по-умолчанию, мы увидим пустые кавычки. Естественно, любым свойством стиля можно управлять из сценария. Вот простой пример, в котором при помощи сценария постоянно меняется цвет текста заголовка:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<HEAD><TITLE>Обработка событий</TITLE></HEAD>
<BODY>
<H1 ID=MainH1 style="color:red; text-align:center;">Текст</H1>
<script>
function tick() {
var strColor = MainH1.style.color;
if (strColor == "red") {MainH1.style.color = "green";}
if (strColor == "green") {MainH1.style.color = "blue";}
if (strColor == "blue") {MainH1.style.color = "red";}
window.setTimeout("tick();", 500);
}
window.onload=tick;
</script>
</BODY></HTML>
Здесь использована функция таймера window.setTimeout(), которая задает интервал повтора указанной функции в микросекундах. Похожий, но более профессиональный пример с эффектом плавного "переливания" цветов Вы можете найти в каталоге на моем сайте. Там в правом верхнем углу страницы есть текст "добавить ссылку", который при просмотре в Internet Explorer переливается всеми цветами радуги. Кстати, если Вы ищете качественный и недорогой web-хостинг, лично я рекомендую PeterHost.Ru. Российский (поддержим наших), прекрасные каналы, сервис "на уровне". И что самое интересное - это цены. В начале мая они прелагали сумашедшую скидку - меньше $40 за год со всеми "наворотами"!! Форум по языкам сценариев: http://www.b-soft.ru/phorum/
|
| http://subscribe.ru/
E-mail: ask@subscribe.ru |
Отписаться
Убрать рекламу |
| В избранное | ||
