-Поэтому в тех случаях, когда мы точно знаем, что `padding` нет, их используют для определения внутренних размеров элемента. И, в отличие от `getComputedStyle(elem).width`, эти свойства всегда работают верно.
+Поэтому в тех случаях, когда мы точно знаем, что `padding` нет, их используют для определения внутренних размеров элемента.
## scrollWidth/Height
@@ -261,6 +203,65 @@ element.style.height = element.scrollHeight + 'px';
[/smart]
+## Не стоит брать width/height из CSS
+
+Теперь несколько слов о том, как не надо делать.
+
+Как мы знаем, CSS-высоту и ширину можно установить с помощью `elem.style` и извлечь, используя `getComputedStyle`, которые в подробностях обсуждаются в главе [](/styles-and-classes).
+
+Получение ширины элемента может быть таким:
+
+```js
+//+ run
+var elem = document.body;
+
+alert( getComputedStyle(elem).width ); // вывести CSS-ширину для elem
+```
+
+Всегда ли такой подход сработает? Увы, нет!
+
+
+
+[online]
Например, кнопка ниже выведет размер такой области для этой страницы:
-
-Этот способ -- кросс-браузерный.
+[/online]
[warn header="Не `window.innerWidth/Height`"]
-Все браузеры, кроме IE8-, также поддерживают свойства `window.innerWidth/innerHeight`. Они хранят текущий размер окна.
+Все браузеры, кроме IE8-, также поддерживают свойства `window.innerWidth/innerHeight`. Они хранят текущий размер *окна браузера*.
-Выглядят они короче, чем `document.documentElement.clientWidth`, однако есть один нюанс.
+В чём отличие? Оно небольшое, но чрезвычайно важное.
-Свойства `clientWidth/Height` берут в расчёт полосу прокрутку, а эти свойства -- нет.
+Свойства `clientWidth/Height`, если есть полоса прокрутки, возвращают именно ширину/высоту документа, за вычетом прокрутки, а эти свойства -- игнорируют её наличие.
Если справа часть страницы занимает полоса прокрутки, то эти строки выведут разное:
```js
@@ -30,18 +34,18 @@ alert( window.innerWidth ); // вся ширина окна
alert( document.documentElement.clientWidth ); // ширина минус прокрутка
```
-Обычно нам нужна именно *доступная* ширина окна, например, чтобы нарисовать что-либо, то есть за вычетом полосы прокрутки. Поэтому используем `document.documentElement.clientWidth`.
+Обычно нам нужна именно *доступная* ширина окна, например, чтобы нарисовать что-либо, то есть за вычетом полосы прокрутки. Поэтому используем `documentElement.clientWidth`.
[/warn]
## Ширина/высота страницы с учётом прокрутки
-Если прокрутка на странице заведомо присутствует, то полные размеры страницы можно взять в `document.documentElement.scrollWidth/scrollHeight`.
+Теоретически, видимая часть страницы -- это `documentElement.clientWidth/Height`, а полный размер с учётом прокрутки -- по аналогии, `documentElement.scrollWidth/scrollHeight`.
-Проблемы с этими свойствами возникают, когда *прокрутка то есть, то нет*. В этом случае они работают некорректно.
+Это верно для обычных элементов.
-В браузерах Chrome/Safari и Opera при отсутствии прокрутки значение `document.documentElement.scrollHeight` в этом случае может быть даже меньше, чем `document.documentElement.clientHeight` (нонсенс!).
+А вот для страницы с этими свойствами возникает проблема, когда *прокрутка то есть, то нет*. В этом случае они работают некорректно. В браузерах Chrome/Safari и Opera при отсутствии прокрутки значение `documentElement.scrollHeight` в этом случае может быть даже меньше, чем `documentElement.clientHeight`, что, конечно же, выглядит как совершеннейшая чепуха и нонсенс.
-Эта проблема возникает именно для `document.documentElement`, то есть для всей страницы. С обычными элементами здесь всё в порядке.
+Эта проблема возникает именно для `documentElement`, то есть для всей страницы.
Надёжно определить размер страницы с учетом прокрутки можно, взяв максимум из нескольких свойств:
@@ -56,11 +60,17 @@ var scrollHeight = Math.max(
alert('Высота с учетом прокрутки: ' + scrollHeight);
```
-Почему так? Лучше и не спрашивайте, это одно из редких мест, где просто обходятся ошибки в браузерах. Глубокой логики здесь нет.
+Почему так? Лучше и не спрашивайте, это одно из редких мест, где просто ошибки в браузерах. Глубокой логики здесь нет.
## Получение текущей прокрутки [#page-scroll]
-Значение текущей прокрутки страницы хранится в свойствах `window.pageXOffset/pageYOffset`.
+У обычного элемента текущую прокрутку можно получить в `scrollLeft/scrollTop`.
+
+Что же со страницей?
+
+Большинство браузеров корректно обработает запрос к `documentElement.scrollLeft/Top`, однако Safari/Chrome/Opera есть ошибки (к примеру [157855](https://code.google.com/p/chromium/issues/detail?id=157855), [106133](https://bugs.webkit.org/show_bug.cgi?id=106133)), из-за которых следует использовать `document.body`.
+
+Чтобы вообще обойти проблему, можно использовать специальные свойства `window.pageXOffset/pageYOffset`:
```js
//+ run
@@ -74,11 +84,9 @@ alert('Текущая прокрутка слева: ' + window.pageXOffset);
- `top` -- Y-координата верхней границы элемента,
- `left` -- X-координата левой границы, @@ -25,12 +21,13 @@ var coords = elem.getBoundingClientRect(); Например: -
- Координаты могут быть дробными -- это нормально, так как они возвращаются из внутренних структур браузера. -
- Координаты могут быть и отрицательными, например если прокрутить страницу так, что часть кнопки будет выходить за верхнуюю границу окна, то её `top`-координата будет меньше нуля. -
- Некоторые современные браузеры также добавляют к объекту свойства для ширины и высоты: `width/height`, но их можно получить и простым вычитанием: `height = bottom - top`, `width = right - left`. +
- Координаты могут быть и отрицательными, например если прокрутить страницу так, что верх элемента будет выходить за верхнуюю границу окна, то его `top`-координата будет меньше нуля. +
- Некоторые современные браузеры также добавляют к результату `getBoundingClientRect` свойства для ширины и высоты: `width/height`, но их можно получить и простым вычитанием: `height = bottom - top`, `width = right - left`.
- Координата `clientY` изменилась. Она теперь равна `0`, так как элемент находится вверху окна. +
- Координата `clientY` изменилась. Она была `175`, а стала `0`, так как элемент находится вверху окна.
- Координата `pageY` осталась такой же, так как отсчитывается от левого-верхнего угла *документа*.
- **Общая информация об экране хранится в глобальной переменной [screen](https://developer.mozilla.org/en/DOM/window.screen):** +
- Размеры экрана хранятся в глобальной переменной [screen](https://developer.mozilla.org/en/DOM/window.screen): ```js //+ run @@ -240,7 +193,7 @@ alert( screen.availWidth + ' x ' + screen.availHeight); ``` -
- **Координаты левого-верхнего угла браузера на экране хранятся в `window.screenX,` `window.screenY`** (не поддерживаются IE8-): +
- Координаты левого-верхнего угла браузера на экране хранятся в `window.screenX,` `window.screenY` (не поддерживаются IE8-): ```js //+ run @@ -248,9 +201,10 @@ alert("Браузер находится на " + window.screenX + "," + window. ``` Они могут быть и меньше нуля, если окно частично вне экрана. -
- **Координаты *DOM-элемента* на экране получить нельзя, браузер не предоставляет свойств и методов для этого.**
- Относительно экрана `screen` -- можно узнать координаты браузера, но не элемента. -Метод `elem.getBoundingClientRect()` поддерживается IE очень давно, с версии 6, а вот версии других браузеров старше чем 2010 года (примерно), могут не иметь его. Для них (и только для них) используется подсчёт координат суммированием `offsetTop/Left`. +Иногда в старом коде можно встретить использование `offsetTop/Left` для подсчёта координат. Это очень старый и неправильный способ, не стоит его использовать. Координаты будут нужны нам далее, при работе с событиями мыши (координаты клика) и элементами (перемещение). diff --git a/2-ui/1-document/20-dom-cheatsheet/article.md b/2-ui/1-document/19-dom-cheatsheet/article.md similarity index 100% rename from 2-ui/1-document/20-dom-cheatsheet/article.md rename to 2-ui/1-document/19-dom-cheatsheet/article.md
-
-Обратите внимание: страница в этом примере прокручена, её часть осталась сверху.
+
**Координаты относительно окна не учитывают прокрутку, они высчитываются от границ текущей видимой области.**
+Иначе говоря, если страницу прокрутить, то элемент поднимется выше или опустится ниже -- его координаты относительно окна изменятся.
+
+[online]
Например, кликните на кнопку, чтобы увидеть её координаты:
@@ -43,13 +40,22 @@ function showRect(elem) {
Если вы прокрутите эту страницу, то положение кнопки в окне изменится, и её координаты, соответственно, тоже.
+[/online]
-
-
-**Итак, координаты `pageX/pageY` не меняются при прокрутке, в отличие от `clientX/clientY`.**
-
-Технически, координаты относительно страницы включают в себя текущую прокрутку. Эти две системы координат жёстко связаны, их разность `pageY-clientY` -- в точности размер текущей прокрученной области.
+Итак, координаты `pageX/pageY` не меняются при прокрутке, в отличие от `clientX/clientY`.
## Получение координат [#getCoords]
К сожалению, готовой функции для получения координат элемента относительно страницы нет. Но её можно легко написать самим.
+Эти две системы координат жёстко связаны: `pageY = clientY + текущая вертикальная прокрутка`.
+
Наша функция `getCoords(elem)` будет брать результат `elem.getBoundingClientRect()` и прибавлять текущую прокрутку документа.
-Результат: объект с координатами `{left: .., top: ..}`
+Результат `getCoords`: объект с координатами `{left: .., top: ..}`
+
+```js
+function getCoords(elem) { // кроме IE8-
+ var box = elem.getBoundingClientRect();
+
+ return {
+ top: box.top + pageYOffset,
+ left: box.left + pageXOffset
+ };
+
+}
+```
+
+Если нужно поддерживать более старые IE, то вот альтернативный, самый кросс-браузерный вариант:
```js
//+ autorun
function getCoords(elem) {
- // (1)
- var box = elem.getBoundingClientRect();
-
- var body = document.body;
- var docEl = document.documentElement;
-
- // (2)
- var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
- var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
-
- // (3)
- var clientTop = docEl.clientTop || body.clientTop || 0;
- var clientLeft = docEl.clientLeft || body.clientLeft || 0;
-
- // (4)
- var top = box.top + scrollTop - clientTop;
- var left = box.left + scrollLeft - clientLeft;
-
- return { top: top, left: left };
+ // (1)
+ var box = elem.getBoundingClientRect();
+
+ var body = document.body;
+ var docEl = document.documentElement;
+
+ // (2)
+ var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
+ var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
+
+ // (3)
+ var clientTop = docEl.clientTop || body.clientTop || 0;
+ var clientLeft = docEl.clientLeft || body.clientLeft || 0;
+
+ // (4)
+ var top = box.top + scrollTop - clientTop;
+ var left = box.left + scrollLeft - clientLeft;
+
+ return { top: top, left: left };
}
```
@@ -95,9 +107,9 @@ function getOffsetSum(elem) {
var top = 0, left = 0;
while(elem) {
- top = top + parseInt(elem.offsetTop);
- left = left + parseInt(elem.offsetLeft);
- elem = elem.offsetParent;
+ top = top + parseInt(elem.offsetTop);
+ left = left + parseInt(elem.offsetLeft);
+ elem = elem.offsetParent;
}
return {top: top, left: left};
@@ -106,9 +118,8 @@ function getOffsetSum(elem) {
Казалось бы, код нормальный. И он как-то работает, но разные браузеры преподносят "сюрпризы", включая или выключая размер рамок и прокруток из `offsetTop/Left`, некорректно учитывая позиционирование. В итоге результат не всегда верен. Можно, конечно, разобрать эти проблемы и посчитать действительно аккуратно и правильно этим способом, но зачем? Ведь есть `getBoundingClientRect`.
-### Сравнение offset* с getBoundingClientRect
-
-Посмотрим разницу между описанными способами вычисления координат на примере.
+[online]
+Вы можете увидеть разницу между вычислением координат через `offset*` и `getBoundingClientRect` на примере.
В прямоугольнике ниже есть 3 вложенных `DIV`. Все они имеют `border`, кое-кто из них имеет `position/margin/padding`.
@@ -117,7 +128,7 @@ function getOffsetSum(elem) {
[pre]
-
Кликните, чтобы получить координаты getOffsetSum и getCoords
+ Кликните, чтобы получить координаты getOffsetSum и getCoords
@@ -128,20 +139,20 @@ function getOffsetSum(elem) {
[/pre]
@@ -154,79 +165,21 @@ document.getElementById('getBoundingClientRectEx').onclick = function(event) {
-**Именно `getCoords` всегда возвращает верное значение :).**
-
-
-
-
-### Комбинированный подход
-
-Фреймворки, которые хотят быть совместимыми со старыми браузерами, используют комбинированный подход:
-
-```js
-function getOffset(elem) {
- if (elem.getBoundingClientRect) {
- return getCoords(elem);
- } else { // старый браузер
- return getOffsetSum(elem);
- }
-}
-```
-
-[js hide="Открыть полный код getCoords/getOffsetSum"]
-function getOffsetSum(elem) {
- var top=0, left=0
- while(elem) {
- top = top + parseInt(elem.offsetTop)
- left = left + parseInt(elem.offsetLeft)
- elem = elem.offsetParent
- }
-
- return {top: top, left: left}
-}
-
-
-function getCoords(elem) {
- var box = elem.getBoundingClientRect()
-
- var body = document.body;
- var docEl = document.documentElement;
-
- var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
- var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
-
- var clientTop = docEl.clientTop || body.clientTop || 0;
- var clientLeft = docEl.clientLeft || body.clientLeft || 0;
-
- var top = box.top + scrollTop - clientTop;
- var left = box.left + scrollLeft - clientLeft;
-
- return { top: Math.round(top), left: Math.round(left) };
-}
-
-
-function getOffset(elem) {
- if (elem.getBoundingClientRect) {
- return getCoords(elem)
- } else {
- return getOffsetSum(elem)
- }
-}
-[/js]
-
+Именно `getCoords` всегда возвращает верное значение.
+[/online]
## Координаты на экране screenX/screenY
Есть ещё одна система координат, которая используется очень редко, но для полноты картины необходимо её упомянуть.
-Координаты относительно *экрана* `screenX/screenY` отсчитываются от его левого-верхнего угла. Имеется в виду именно *весь экран*, а не окно браузера.
+*Координаты относительно экрана* `screenX/screenY` отсчитываются от его левого-верхнего угла. Имеется в виду именно *весь экран*, а не окно браузера.
Такие координаты могут быть полезны, например, при работе с мобильными устройствами или для открытия нового окна посередине экрана вызовом [window.open](https://developer.mozilla.org/en-US/docs/DOM/window.open).
-**Именно `getCoords` всегда возвращает верное значение :).**
-
-
-
-
-### Комбинированный подход
-
-Фреймворки, которые хотят быть совместимыми со старыми браузерами, используют комбинированный подход:
-
-```js
-function getOffset(elem) {
- if (elem.getBoundingClientRect) {
- return getCoords(elem);
- } else { // старый браузер
- return getOffsetSum(elem);
- }
-}
-```
-
-[js hide="Открыть полный код getCoords/getOffsetSum"]
-function getOffsetSum(elem) {
- var top=0, left=0
- while(elem) {
- top = top + parseInt(elem.offsetTop)
- left = left + parseInt(elem.offsetLeft)
- elem = elem.offsetParent
- }
-
- return {top: top, left: left}
-}
-
-
-function getCoords(elem) {
- var box = elem.getBoundingClientRect()
-
- var body = document.body;
- var docEl = document.documentElement;
-
- var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
- var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
-
- var clientTop = docEl.clientTop || body.clientTop || 0;
- var clientLeft = docEl.clientLeft || body.clientLeft || 0;
-
- var top = box.top + scrollTop - clientTop;
- var left = box.left + scrollLeft - clientLeft;
-
- return { top: Math.round(top), left: Math.round(left) };
-}
-
-
-function getOffset(elem) {
- if (elem.getBoundingClientRect) {
- return getCoords(elem)
- } else {
- return getOffsetSum(elem)
- }
-}
-[/js]
-
+Именно `getCoords` всегда возвращает верное значение.
+[/online]
## Координаты на экране screenX/screenY
Есть ещё одна система координат, которая используется очень редко, но для полноты картины необходимо её упомянуть.
-Координаты относительно *экрана* `screenX/screenY` отсчитываются от его левого-верхнего угла. Имеется в виду именно *весь экран*, а не окно браузера.
+*Координаты относительно экрана* `screenX/screenY` отсчитываются от его левого-верхнего угла. Имеется в виду именно *весь экран*, а не окно браузера.
Такие координаты могут быть полезны, например, при работе с мобильными устройствами или для открытия нового окна посередине экрана вызовом [window.open](https://developer.mozilla.org/en-US/docs/DOM/window.open).
-
-