Внешний вид и местоположение элементов

Эта глава — о свойствах стиля, получении о них информации и изменении при помощи JavaScript.

Перед прочтением, убедитесь, что хорошо знакомы с CSS Box Model. Вы должны хорошо понимать, что такое padding, margin, border.

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

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

В браузере есть три координатные системы.

Относительно документа pageX/pageY

Точка начала координат лежит в левом верхнем углу страницы.

Относительно окна clientX/clientY

Начало координат лежит в левом верхнем углу текущей видимой области.

Относительно экрана screenX/screenY

Начало координат — левый-верхний угол экрана.

Координатами элемента, для краткости, называются координаты его левого верхнего угла.