Если для тега HTML применен стиль CSS, то это отражается на объектной модели документа. Браузер предусматривает для соответствующего объекта свойство style. Это свойство само является объектом и содержит информацию о заданных стилях. Эту информацию можно читать и менять, а значит — менять внешнее представление (или положение) элемента на экране. В этом и состоит простая суть программного управления стилями в HTML-документе.
Возникает законный вопрос: как добраться до свойства style объекта, построенного браузером для тега документа? Один из способов — использовать коллекцию all объекта document.
Коллекция — это массив объектов. Коллекция all содержит объекты, построенные для всех тегов документа. Так, document.all[0] — это объект, построенный для первого тега HTML-документа, document.all[1] — для второго и так далее. Каждый объект коллекции all имеет свойство tagName — имя тега, которому соответствует объект.
Расположенный ниже HTML-документ показывает в окошке “alert” свои теги:
Обращаться по индексу к элементу коллекции all не удобно. Во-первых, этот индекс не хочется высчитывать вручную, во-вторых, он меняется, если мы помещаем в документ новые теги. Последняя неприятность делает использование числового индекса совершенно невозможным. К счастью, в качестве индекса можно использовать имя или идентификатор тега. Имя мы использовали и раньше, оно вводится при помощи атрибута name. Идентификатор, играющий практически ту же роль, что и имя, задается атрибутом id.
Пусть, например, в HTML-коде задан тег:
Добраться до соответствующего ему объекта, можно, заменив индекс
коллекции all на имя, заданное
Если в приведенном выше примере заменить доступ к объекту IMG, записанный как document.all["pic"] просто на pic, то все будет прекрасно работать! То есть, функция showRU() может иметь и такой вид:
function showRU()
{
if(size)
{
pic.width *= 2;
pic.height *= 2;
}
else
{
pic.width /= 2;
pic.height /= 2;
}
size = !size;
}
|
Однако, такое обращение к объектам документа работает не для всех тегов.
Нас интересует свойство style. Добраться до него можно по следующей схеме: document.all["имя"].style.
Посмотрите на следующий HTML-код:
Ничего особенного! Обычный список с обработкой события onclick на каждом из трех строк списка. Функция go может выполнять, какие-то действия, например, загружать на экран новые страницы. Ограничим пока работу функции go простым alert-сообщением.
Посмотрите как работает это приложение. Обязательно щелкните в браузере в меню Вид по позиции В виде HTML и прочитайте программный код.
Меню работает, но выглядет не очень симпатично. Хочется, чтобы при “наезде” курсором на строки, они инвертировали свой цвет. Давайте применим CSS! Будем отслеживать события onmouseover (мышиный курсор появился над элементом) и onmouseout (мышиный курсор ушел с элемента) и соответственно менять стиль этого элемента. Список теперь будет иметь вид:
Функция over должна менять стиль строки списка таким образом, чтобы он был написан белым по черному, а функция out должна обеспечить обычный черный текст по белому фону.
Добраться до нужных свойств первой строки списка достаточно просто:
document.all["item0"].style.color — цвет текста document.all["item0"].style.background — цвет фона |
Функции over и out можно записать так:
function over(i)
{
eval('document.all["item'+i+'"].style.color="white"');
eval('document.all["item'+i+'"].style.background="black"');
}
function out(i)
{
eval('document.all["item'+i+'"].style.color="black"');
eval('document.all["item'+i+'"].style.background="white"');
}
|
Как видите, для вычислений вызывается стандартная функция eval. Эта функция выполняет аргумент-строку как JavaScript-программу. Вот в эту строку мы и помещаем правильный идентификатор тега, который зависит от переменной i. Для i=0 получится “item0”, для i=1 — “item1”, для i=2 — “item2”, то есть как раз то, что нам надо.
Определим для тега LI начальный стиль:
LI { color:black; background:white; }
|
И теперь можно посмотреть, что у нас получилось.
Меню работает! Но почему-то подсветка занимает всю ширину строки, а это не очень красиво. Так получается потому, что мы не задали в стиле ширину строк, а, значит она наследуется от родителя — тега BODY и, тем самым, равна ширине окна браузера. Попытка задать ширину в описание стиля для тега LI терпит неудачу. Дело в том, что стилевое свойство width поддерживается только тегами DIV и SPAN. Придется разместить наш список внутри тега DIV:
И последний штрих: укажем в стиле для тега LI форму курсора такую, как на ссылке:
LI { color:black; background:white; cursor:hand}
|
Результат можно посмотреть здесь.
Раскроем секреты приложения
Абсолютное позиционирование и Z-индекс.
Картинка начинает двигаться по экрану сразу после загрузки документа.
Это происходит потому, что в теге BODY размещен атрибут
onload. После полной загрузки документа,
выполнится JavaScript-выражение, записанное в качестве значения этого
атрибута:
Функция setInterval('Move()',20) создаст таймер, который будет запускать функцию Move() каждые 20 миллисекунд.
Функция Move()увеличивает горизонтальную координату картинки на два пиксела, если эта координата меньше 500. В противном случае, функция останавливает таймер:
function Move()
{
var obj = document.all["move"].style;
if(obj.posLeft < 500) obj.posLeft +=2;
else clearInterval(tim);
}
|
