Как создать сайт

Размеры и прокрутка элементов на веб-странице

Здравствуйте! В этом уроке мы с вами рассмотрим как изменять размеры элементов и прокрутку элементов на странице с помощью JavaScript.  Но и хотелось бы напомнить, что для работы с позиционированием элементов на странице, вам необходимо знать позиционирование в  css, а для работы с размерами — знать как изменять размеры элемента в JavaScript.

размеры и прокрутка элементов на веб-странице

Размеры элемента

У элементов есть ряд свойств,  которые содержат их внешние и внутренние размеры.

Эти свойства  в отличие от свойств CSS, содержат числа в пикселях.

Вот  пример этих свойств:

размеры элемента

Как видите на рисунке все они с трудом умещаются. Давайте будем разбираться с ними по порядку.

offsetParent, offsetLeft/Top

Конечно случаи, когда можно использовать эти свойства довольно редки.  В основном, эти свойства используют, поскольку не знают  как правильно использовать координаты.

В свойстве offsetParent содержится ссылка на родительский элемент.

Давайте разбираться, что это значит.

Когда браузер вырисовывает страницу, то он высчитывает так называемое дерево расположения элементов, иначе говоря «дерево рендеринга», которое  и содержит информацию о размерах элементоа.

При этом одни элементы  могут рисоваться внутри других. Но, вот к примеру, если у элемента задан position:absolute, то есть абсолютное позиционирование, то его расположение вычисляется уже не относительно его родителя, а относительно ближайшего позиционированного элемента, или BODY, если такой отсутствует.
Таким образом получается, что элемент будет иметь в дополнение к своему родителю в DOM – ещё одного родителя, то есть относительно которого он рисуется. Собственно этот элемент и будет в свойстве offsetParent.

А вот свойства offsetLeft/Top будут задавать смещение относительно offsetParent.

В примере внутренний <div> имеет родителя <form>, но offsetParent у него <main>, и соответственно сдвиги относительно его верхнего-левого угла будут в offsetLeft/Top:

<main style="position: relative">
  <form>
    <div id="example1" style="position: absolute; left: 150px; top: 150px">...</div>
  </form>
</main>

 

Читайте также  Создание, добавление и удаление элементов HTML страницы

offsetWidth/Height

Теперь  давайте перейдем  к самому элементу.

Эти 2 свойства – самые простые. Они  показывают «внешнюю» ширину/высоту элемента, то есть его  размер, включая  размеры рамки .
размеры элемента
Для  элемента из примера:

  • offsetWidth = 390 –  это внешняя ширина блока, её можно получить сложением  (300px, но её часть на рисунке  отнимает прокрутка, поэтому 284 + 16), поля(2*20px) и рамки(2*25px).
  • offsetHeight = 290 –  это внешняя высота блока.

Следует отметить, что координаты и размеры в JavaScript устанавливаются  для видимых элементов.

Для элементов с display:none, которые не отображаются на странице дерево рендеринга соответственно не строится. Для них размеры равны нулю.

Этим можно воспользоваться для проверки, видимости элемента:

function isHidden(el) {
  return !el.offsetWidth && !el.offsetHeight;
}
  •  Будет работать, даже если родителю элемента установлено свойство display:none.
  • Считает элемент видимым, в том случае, если позиционирован за пределами экрана или есть свойство visibility:hidden.
  • «Схлопнутый» элемент, то есть элемент у которого не заданы размеры, например пустой div без высоты и ширины, будет принят как невидимый.

clientTop/Left

Тперь рассмотрим рамки border.

Для  рамок  имеются  свойства- clientTop и clientLeft.

В  примере:

  • clientLeft = 25 – ширина левой рамки
  • clientTop = 25 – ширина верхней рамки

Но  оказывается они – вовсе не рамки, а отступы внутренней части элемента от внешней.

Так в чем же разница? Давайте разбираться.

Она  может возникнуть тогда, когда документ располагается справа налево ( например ОС на арабском языке или иврите). Так вот полоса прокрутки в этом случае  будет находиться слева, и тогда свойство clientLeft  будет включать в себя еще и ширину полосы прокрутки.

clientWidth/Height

Эти свойства –  собственно размер элемента внутри рамок border.

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

Читайте также  Объект Node. Как перемещаться по DOM

размеры элемента
На рисунке  вы видите, что нижний padding заполнен текстом, но это не так важно: по правилам он всегда будет входить в clientHeight.

Теперь clientWidth – ширина содержимого здесь не равна CSS-ширине, её часть будет  «съедать» полоса прокрутки. Поэтому в clientWidth входит не CSS-ширина, а  собственно реальная ширина содержимого 285px плюс левое и правое поля padding (по 20px), итого 325px.

Если внутренних нет, то clientWidth/Height в точности равны размеру области содержимого, внутри рамок и полосы прокрутки соответственно.

scrollWidth/Height

Эти свойства –  в свою очередь аналоги clientWidth/clientHeight, но с учетом прокрутки.

Если свойства clientWidth/clientHeight относятся только к видимой области элемента, то scrollWidth/scrollHeight добавят к ней прокрученную (которую не видно) по горизонтали/вертикали соответственно.
размеры элемента
Как видно из рисунка выше:

    • scrollHeight = 723 – полная внутренняя высота, включая  и прокрученную область.
  • scrollWidth = 324 – полная внутренняя ширина без области прокрутки.

Эти свойства можно использовать, чтобы «распахнуть» элемент на всю ширину/высоту, таким кодом:

element.style.height = element.scrollHeight + 'px';

scrollLeft/scrollTop

Свойства scrollLeft/scrollTop – ширина/высота невидимой, прокрученной в данный момент, части элемента слева и сверху.

Следующая иллюстрация показывает значения scrollHeight и scrollTop для блока с вертикальной прокруткой.
размеры элемента

scrollLeft/scrollTop можно изменять

В отличие от описанных выше свойств, которые доступны только для чтения, значения scrollLeft/scrollTop  вы можете изменять, и браузер выполнит прокрутку элемента. Это можно использовать для создания различных динамических эффектов.

Итоги

У элементов есть следующие свойства:

  • offsetParent – «родитель по дереву элементов» – ближайшая ячейка таблицы, body для позиционирования или ближайший спозиционированный элемент для других типов позиционирования.
  • offsetLeft/offsetTop – позиция в пикселях левого верхнего угла блока, относительно offsetParent.
  • offsetWidth/offsetHeight – «внешняя» ширина/высота блока, включая размеры рамок.
  • clientLeft/clientTop – отступ области содержимого от левого-верхнего угла элемента. Если ОС располагает вертикальную прокрутку справа, то равны ширинам левой/верхней рамки, а если же слева (ОС на иврите, арабском), то clientLeft включает в себя и прокрутку.
  • clientWidth/clientHeight – ширина/высота содержимого вместе с внутренними полями, но без учета полосы прокрутки.
  • scrollWidth/scrollHeight – ширина/высота содержимого, включая и прокручиваемую область. Включает в себя внутренние отступы и не включает полосы прокрутки.
  • scrollLeft/scrollTop – ширина/высота прокрученной области документа, считается от верхнего левого угла.
Читайте также  Координаты элементов в документе

Все описанные выше свойства, доступны только для чтения, кроме scrollLeft/scrollTop. Изменение этих свойств будет заставлять браузер прокручивать элемент.

Задачи

Найдите размер прокрутки снизу

В свойстве elem.scrollTop содержится размер прокрученной области при отсчете сверху. А как подсчитать размер прокрутки снизу?

Вам надо написать соответствующее  выражение для произвольного элемента.

Узнать ширину полосы прокрутки

Напишите код, который возвратит ширину  полосы прокрутки. Именно самой полосы, там  где ползунок.

В чём  может быть отличие «width» и «clientWidth» ?

Ка вы думете в чём отличия между getComputedStyle(elem).width и elem.clientWidth?

Укажите хотя бы три отличия.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться
Понравилась запись? Подпишитесь на обновления по почте:

Об авторе

admin administrator

Оставить ответ

+ 50 = 58

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: