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

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

Образец документа

Образец документа: tutorial/browser/dom/metric/metric.html.

Перед тем, как продолжать чтение, ознакомьтесь с ним.

В примерах мы будем использовать блок с рамкой (border), полями (padding), отступами (margin) и прокруткой:

<div id="example">
  ...Текст...
</div>
<style>
#example {
  width: 300px;
  height: 200px;

  border: 25px solid #F0E68C; /* рамка 25px */

  padding: 20px;              /* поля 20px */
  margin: 20px;               /* отступы 20px */

  overflow: auto;             /* прокрутка */
}
</style>

Результат выглядит так:

Вы можете открыть его по этой ссылке.

CSS-метрики width/height

CSS-высоту и ширину width/height можно установить с помощью elem.style и извлечь, используя getComputedStyle()/currentStyle:

style = window.getComputedStyle ? getComputedStyle(elem, '') : elem.currentStyle;
alert(style.width); // вывести CSS-ширину

Они относятся к размеру внутренней части элемента, которая лежит внутри полей padding.

На рисунке выше нижнее поле заполнено прокруткой, но оно всё равно подразумевается и не входит в высоту height.

Подробнее об этих функциях — в статье Стили и классы, getComputedStyle.

Полоса прокрутки

Полоса прокрутки — причина многих проблем и недопониманий. Поэтому мы будем разбирать её влияние на метрики самым внимательным образом.

При наличии вертикальной полосы прокрутки — она забирает себе часть ширины элемента.

Ширина полосы прокрутки обычно составляет 16px за редким исключением (мобильные и редкие браузеры, настройка прокрутки при помощи специализированных CSS-свойств), поэтому внутренняя область в примере будет уже не 300px, а 284px.

То есть, несмотря на то, что на рисунке полоса прокрутки находится визуально в правом поле — отнимает место она не у поля, а у внутренней ширины.

…Но при этом некоторые браузеры отражают это уменьшение ширины в результате getComputedStyle(...).width, а некоторые — нет:

На рисунке ниже в CSS указано width:300px. А вот getComputedStyle возвращает 300px/284px, в зависимости от браузера:

Вы можете увидеть значение getComputedStyle(...).width, нажав на кнопку в ифрейме:

Открыть в новом окне

Еще раз заметим, что разночтения касаются только чтения свойства getComputedStyle(...).width из JavaScript, CSS тут не при чем. Отображение будет одинаковым. Ширина текста при наличии прокрутки уменьшается до 284px.

Здесь и далее, мы будем понимать под width именно реальную ширину внутренней области (284px), а не результат чтения CSS-свойства width, который может быть разным.

JavaScript-метрики

В JavaScript существует ряд дополнительных свойств, содержащих размеры элементов.

Метрики JavaScript, в отличие от свойств CSS, содержат числа, в пикселях, без единиц измерения 'px' на конце.

clientWidth/Height

Размер клиентской зоны — внутренняя область плюс поля.

Общая ширина внутри рамки - это 284 (width) + 20(padding left) + 20 (padding right) = 324.

Получаем:

clientWidth = 284(width) + 2*20(padding) = 324
clientHeight = 200(height) + 2*20(padding) = 240

Обратите внимание, в clientHeight входят и верхнее и нижнее поля, несмотря на то, что нижнее поле заполнено текстом.

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

Если поля есть — их необходимо будет вычесть.

scrollWidth/Height

Ширина и высота контента с учетом прокручиваемой области.

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

scrollWidth/Height то же самое, что и clientWidth/Height, но включает в себя прокручиваемую область.

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

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

Нажмите на кнопку, чтобы распахнуть элемент:

текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

element.style.height = element.scrollHeight + ‘px’

scrollTop/scrollLeft

Размер невидимой прокрученной области: вертикальной и горизонтальной. Значение всегда измеряется в пикселях.

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

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

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

Следующий элемент имеет обработчик onclick="this.scrollTop+=10". Он прокручивается по клику на 10px вниз:

Кликни
Меня
1
2
3
4
5
6
7
8
9

offsetWidth/Height

Внешняя ширина/высота блока, полный размер, включая рамки, но без отступов(margin).

• offsetWidth = 390 - внешняя ширина блока
• offsetHeight = 290 - внешняя высота блока

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

clientTop/Left

Отступ клиентской области от внешнего угла блока.

Другими словами, ширина верхней/левой рамки(border) в пикселях.

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

Казалось бы, зачем еще какие-то свойства, если ширину рамки можно получить напрямую из CSS? Обычно они действительно не нужны.

Но есть две ситуации, когда эти свойства бывают полезны:

1. В случае, когда документ располагаетсясправа налево (арабский язык, иврит), свойство clientLeft включает в себя еще и ширину правой полосы прокрутки.
2. В IE<8 документ, а точнее — элемент document.documentElement немного смещен относительно верхнего левого угла документа. Несмотря на то, что рамки там нет, сдвиг существует и хранится в document.body.clientLeft/clientTop (обычно это 2 пикселя).

offsetParent, offsetLeft/Top

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

Например, если элемент позиционирован абсолютно, то таким родителем offsetParent является ближайший позиционированный элемент (т.е. свойство position не равно static), или BODY, если таковой отсутствует.

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

<div style="position: relative">
  <div style="position: absolute; left: 180px; top: 180px">...</div>
</div>

function isHidden(elem)
  return !elem.offsetWidth && !elem.offsetHeight;
}

Итого

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

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

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

Краткая схема:

Прокрутку элемента можно прочитать или изменить через свойства scrollLeft/Top.

В этой главе мы считали, что страница находится в режиме соответствия стандартам. В режиме совместимости — всё также, но некоторые старые браузеры требуют document.body вместо documentElement.

var div = document.createElement('div');
div.style.cssText="position:absolute;height:50px;overflow-y:hidden;width:50px;visibility:hidden";
div.innerHTML = '<div style="height:100px"></div>';
var innerDiv = div.firstChild;

document.body.appendChild(div);
var w1 = innerDiv.offsetWidth;

div.style.overflowY = 'scroll';
var w2 = innerDiv.offsetWidth;

alert(w1 - w2);

var div = document.getElementById('moving-div')
div.style.position = 'absolute'
div.style.right = div.style.top = 0

var div = document.getElementById('moving-div')

var placeHolder = document.createElement('div')
placeHolder.style.height = div.offsetHeight + 'px'

var div = document.getElementById('moving-div')

var placeHolder = document.createElement('div')
placeHolder.style.height = div.offsetHeight + 'px'

// IE || другой браузер
var computedStyle = div.currentStyle ||  getComputedStyle(div, null)

placeHolder.style.marginTop = computedStyle.marginTop // полное название свойства
placeHolder.style.marginBottom = computedStyle.marginBottom

<!DOCTYPE HTML>
<html>
<head>
<style> 
  #moving-div { 
    border: 5px groove green; 
    padding: 5px; 
    margin: 10px;
    background-color: yellow;
  }
</style>
</head>
<body>

Before Before Before

<div id="moving-div">
Text Text Text<br>
Text Text Text<br>
</div>

After After After

<script>
var div = document.getElementById('moving-div')

var placeHolder = document.createElement('div')
placeHolder.style.height = div.offsetHeight + 'px'

var computedStyle = div.currentStyle || getComputedStyle(div, null)

placeHolder.style.marginTop = computedStyle.marginTop // full prop name
placeHolder.style.marginBottom = computedStyle.marginBottom

// highlight it for demo purposes 
placeHolder.style.backgroundColor = '#C0C0C0'

document.body.insertBefore(placeHolder, div)

div.style.position = 'absolute'
div.style.right = div.style.top = 0

</script>


</body>
</html>

var ball = document.getElementById('ball');
var field = document.getElementById('field');

ball.style.left = Math.round(field.clientWidth / 2)+'px';
ball.style.top = Math.round(field.clientHeight / 2)+'px';

var ball = document.getElementById('ball');
var field = document.getElementById('field');

ball.style.left = Math.round(field.clientWidth/2 - ball.offsetWidth/2)+'px';
ball.style.top = Math.round(field.clientHeight/2 - ball.offsetHeight/2)+'px';

<img src="ball.gif" id="ball">

<img src="ball.gif" *!*width="40" height="40"*/!* id="ball">

elem.style.width = '100%';

var bodyClientWidth = document.body.clientWidth;

var style = window.getComputedStyle ? getComputedStyle(elem, '') : elem.currentStyle;

*!*
var bodyInnerWidth = bodyClientWidth - parseInt(style.paddingLeft) - parseInt(style.paddingRight);
*/!*

elem.style.width = bodyInnerWidth + 'px';

elem.style.width = 'auto';