Скрытие элементов Web-страницы в JavaScript

Для скрытия элементов Web-страницы, т.е. для того, чтобы сделать эти элементы невидимыми, а также для того, чтобы восстановить их видимость на Web-странице, используется два свойства каскадных листов стилей: свойство CSS display и свойство CSS visibility.

1 Свойство CSS display

Свойство display определяет, как элемент должен быть показан на Web-странице, и имеет следующие значения:

block - элемент показывается как блочный, применение этого значения для встроенных элементов, например тэга <SPAN>, заставляет его вести подобно блокам - добавляется новая строка в начале и в конце содержимого тэга;
inline - элемент отображается как встроенный, использование блочных тегов, таких как <DIV> и <P>, автоматически показывает содержимое этих тэгов с новой строки. Аргумент inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент;
none - временно удаляет элемент из документа, занимаемое им место не резервируется и Web-страница формируется так, словно элемента и не было. Изменить значение параметра и сделать его вновь видимым можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происхоит переформатирование данных на странице с учетом вновь добавленного элемента;
пустое значение аргумента (принимаемое браузером по умолчанию) означает, что элемент будет виден на Web-странице.

Использование свойства CSS display показано в примере № 1, где, благодаря этому свойству, в текстовом документе, содержащем несколько глав, содержимое каждой главы по щелчку мыши урезается на экране до названия главы и восстановливается при повторном щелчке мыши.

Пример 1

<HTML>
<HEAD>
<TITLE>Использование свойства display</TITLE>
<SCRIPT>
function showTxt()
{
with (window.event.srcElement)
if (tagName == "H1")
with (document.all.item(id+"p").style)
display=display? "" : "none";
}
</SCRIPT>
</HEAD>
<BODY onClick="showTxt()">
<H1 ID="hd1" ALIGN=center"> Глава 1 </H1>
<P ID="hd1p" STYLE="display:none"> Текст первой главы Текст первой главы Текст первой главы Текст первой главы Текст первой главы Текст первой главы Текст первой главы Текст первой главы Текст первой главы Текст первой главы Текст первой главы . . .
<H1 ID="hd2" ALIGN=center"> Глава 2 </H1>
<P ID="hd2p" STYLE="display:none"> Текст второй главы Текст второй главы Текст второй главы Текст второй главы Текст второй главы Текст второй главы Текст второй главы Текст второй главы Текст второй главы Текст второй главы Текст второй главы . . .
<H1 ID="hd3" ALIGN=center"> Глава 3 </H1>
<P ID="hd3p" STYLE="display:none"> Текст третьей главы Текст третьей главы Текст третьей главы Текст третьей главы Текст третьей главы Текст третьей главы Текст третьей главы Текст третьей главы Текст третьей главы Текст третьей главы Текст третьей главы . . .
</BODY>
</HTML>

По событию onClick вызывается функция showTxt(), которая проверяет наименование отмеченного тэга. Если это тэг <H1>, т.е. щелчок мышки был произведен по названию главы, то значение свойства display для тэга <P&gt, имеющего идентификатор, равный идентификатору отмеченного тэга плюс "p", изменится на противоположное: если текст главы был не виден, он станет видимым и наоборот.

Использование оператора with позволило дважды заменить громоздкое выражение document.all.item(window.event.srcElement+"p").style.display словом display.

Единственным ограничением, накладываемым на этот HTML-документ, является то, что идентификатор тэга <P> каждой главы должен быть равен идентификатору соответствующего тэга <H1> с добавлением бувы "p".

2 Свойство CSS visibility

Свойство visibility предназначено для отображения или скрытия элемента Web-страницы, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остается за ним. Если предполагается вывод разных элементов в одно и то же место экрана, следует использовать абсолютное позиционирование или воспользоваться свойством display. Свойство visibility может принимать следующие значения:

visible - отображает элемент как видимый;
hidden - элемент становится невидимым или, точнее, полностью прозрачным, поскольку он продолжает участвовать в форматировании страницы;
collapse - если это значение применяется не к строкам или колонкам таблицы, то результат его использования будет таким же, как hidden. В случае использования collapse для содержимого ячеек таблиц, то они реагируют, словно к ним было применено свойство display со значением none, при этом заданные строки и колонки убираются, а таблица перестраивается по новому (этот аргумент не поддерживается браузером MIE).

Использование свойства CSS visibility показано в примере № 2, где с помощью тэгов <DIV> создается двуслойная структура, первый слой которой составляют два элемента формы для ввода текста (тэги <INPUT>), а второй состоит из рисунка (тэг <IMG>).

Пример 2

<HTML>
<HEAD>
<TITLE>Использование свойства visibility</TITLE>
</HEAD>
<BODY TEXT=red>
<INPUT TYPE=button VALUE="Слой 1" onClick="lay1.style.visibility='visible';
lay2.style.visibility='hidden';">
<INPUT TYPE=button VALUE="Слой 2" onClick="lay1.style.visibility='hidden';
lay2.style.visibility='visible';">
<INPUT TYPE=button VALUE="Слои 1 и 2" onClick="lay1.style.visibility='visible';
lay2.style.visibility='visible';">
<DIV ID="lay1" STYLE="position:absolute; left:200;top:100;width:200">
<P>Имя:<INPUT TYPE=text NAME="user_name">
<P>Тел.:<INPUT TYPE=text NAME="tel"></DIV>
<DIV ID="lay2" STYLE="position:absolute; left:200;top:100; z-index:-1; visibility:hidden">
<IMG SRC="fish.gif" WIDTH=200></DIV>
</BODY>
</HTML>

После загрузки Web-страницы на экране будет виден только 1-й слой, поскольку он по умолчанию имеет значение visibile, а для 2-го слоя задано значение hidden.

При нажатии одной из кнопок "Слой 1", "Слой 2" или "Слои 1 и 2 " на экране будут отображаться соответственно первый слой, второй слой или два слоя одновременно, причем в последнем случае рисунок окажется снизу, так как этот слой имеет значение z-index:-1.