Отображение элементов CSS | Скрытие элементов CSS

C помощью css стилей мы можем скрывать нужные и ненужные элементы по какому-то событию. К примеру, при нажатии на кнопку скрыть картинку и т.д.

Таблица 2.10. Свойства управления отображением содержимого элемента
Свойство	Описание	Умолчание	Применение
`overflow`	Наложение	`visible`	К блочным или замещаемым элементам
`clip`	Область отображения	`auto`	К блочным или замещаемым элементам
`visibility`	Отображение	`inherit`	Ко всем элементам

Вид наложения

overflow:visible|hidden|scroll|auto

visible - содержание не обрезается, а может отображаться и вне границ,
hidden - содержание обрезается по границам, прокрутка не предусмотрена,
scroll - содержание обрезается по границам, предусмотрен механизм прокрутки,
auto - обработка определяется браузером.

Область отображения

clip:shape|auto

auto - область отображения имеет тот же размер и те же границы, что и сам элемент,
shape - форма области отображения - прямоугольник rect (верх, право, низ, лево), для которого задаются смещения относительно границ элемента. Отрицательные смещения обеспечивают отображение вне границ элемента.

Способ отображения

visibility:visible|hidden|collapse

visible - область отображения видима,
hidden - часть области отображения, выходящая за границы, не видима (прозрачна),
collapse - часть области отображения, выходящая за границы, скрыта.

<IMG id="Носорог" src="../Рисунки/Носорог.gif" 
    width="148" height="125"
    style="visibility:visible">
<INPUT onClick="if (this.value=='Скрыть')
                    {Носорог.style.visibility='hidden'
                    this.value='Показать'}
                else
                    {Носорог.style.visibility='visible'
                    this.value='Скрыть'}"
    type="button" value="Скрыть">

Дата добавления: 2010-12-27