Применение каскадных таблиц стилей (CSS)


Управление видимостью


Одним из наиболее интересных атрибутов CSS-P является visibility. Он позволяет "проявлять" или прятать информацию на HTML-странице.

Например, страница содержит набор кадров, которые можно перелистывать. Для этого просто нужно нажимать на слово "далее" в конце страницы.

Перелистывание реализовано как изменение атрибута visibility в JavaScript-функции:

function change() { next=current+1; if(next>1) next=0; window.document.all.item("list", current).visibility="hidden"; window.document.all.item("list", next).visibility="visible"; current=next; }

Последовательность "list" - это значение атрибута ID раздела.

Вызов функции при этом помещен в гипертекстовую ссылку со схемой URL "javascript":

<A HREF="javascript:change();void(0);"> далее... </A>

На примере предыдущих фрагментов страницы мы рассмотрели программирование visibility, но ни словом не упомянули о том, как данный атрибут записывается в CSS. Здесь мы восполняем этот пробел и приводим описание невидимого раздела:

<DIV ID=test STYLE="position:absolute; top:230px;left:55px;width:550px; visibility:hidden;">...</DIV>

При программировании атрибута visibility следует принимать в расчет тип браузера. Данная страница написана для Microsoft Internet Explorer. Это следует и из программного кода, который поддерживает объектную модель документа DHTML, и из использования атрибута ID у раздела.



Содержание раздела