Книга: JavaScript. Подробное руководство, 6-е издание

16.2.6. Частичная видимость: свойства overflow и dip

16.2.6. Частичная видимость: свойства overflow и dip

Свойство visibility позволяет полностью скрыть элемент документа. С помощью свойств overflow и clip можно отобразить только часть элемента. Свойство overflow определяет, что происходит, когда содержимое документа превышает размер, указанный для элемента (например, в свойствах стиля width и height). Далее перечислены допустимые значения этого свойства и указано их назначение:

visible

Содержимое может выходить за пределы и по необходимости прорисовываться вне прямоугольника элемента. Это значение по умолчанию.

hidden

Содержимое, вышедшее за пределы элемента, обрезается и скрывается, так что никакая часть содержимого никогда не прорисовывается вне области, определяемой свойствами размера и позиционирования.

scroll

Область элемента имеет постоянные горизонтальную и вертикальную полосы прокрутки. Если содержимое превышает размеры области, полосы прокрутки позволяют увидеть остальное содержимое. Это значение учитывается, только когда документ отображается на экране компьютера; когда документ выводится, например, на бумагу, полосы прокрутки, очевидно, не имеют смысла.

auto

Полосы прокрутки отображаются не постоянно, а только когда содержимое превышает размер элемента.

Если свойство overflow определяет, что должно происходить, когда содержимое элемента превысит область элемента, то с помощью свойства clip можно точно указать, какая часть элемента должна отображаться независимо от того, выходит ли содержимое за пределы элемента. Это свойство особенно полезно для создания эффектов, когда элемент открывается или проявляется постепенно.

Значение свойства clip задает область отсечения элемента. В CSS2 области отсечения прямоугольные, но синтаксис атрибута clip обеспечивает возможность в следующих версиях стандарта задавать области отсечения, отличные от прямоугольных. Синтаксис свойства clip:

rect(top right bottom left)

Значения top, right, bottom и left задают границы прямоугольника отсечения относительно левого верхнего угла области элемента. Чтобы, например, вывести только часть элемента в области 100 X 100 пикселов, можно задать для этого элемента следующий атрибут style:

style="clip: rect(0px 100рх 100рх 0рх);"

Обратите внимание, что четыре значения в скобках представляют собой значения длины и должны включать спецификацию единиц измерения, например рх для пикселов. Проценты здесь не допускаются. Значения могут быть отрицательными - это будет означать, что область отсечения выходит за переделы области, определенной для элемента. Для любого из четырех значений ключевое слово auto указывает, что этот край области отсечения совпадает с соответствующим краем самого элемента. Например, можно вывести только левые 100 пикселов элемента с помощью следующего атрибута style:

style="clip: rect(auto 100рх auto auto);"

Обратите внимание, что между значениями нет запятых, и края области отсечения задаются по часовой стрелке, начиная с верхнего края.

Оглавление книги