Материалы к уроку
Document - по факту это объект, который содержит всю нашу HTML-структуру.
Window - это окно, в котором показывается наш документ.
Screen - "экран", по факту это весь ваш видимый монитор, включая системные панели и прочее. И если у разных людей разный размер монитора, то и
Screen у них тоже будет разный.
Если нам нужно получить ширину или высоту элемента, включая пэддинги, но без бордеров и прокрутки, можно использовать свойства
clientWidth и
clientHeight Пусть у нас есть блок с текстом, имеющий класс
.box, получим его со страницы, а также его ширину и высоту:
Код
const box = document.querySelector('.box');
const width = box.clientWidth;
const height = box.clientHeight;
console.log(width, height);
Выводим результат в консоль:
Посмотрим какие размеры заданы для этого блока в css-стилях:
Код
.box {
width: 400px;
height: 350px;
overflow: scroll;
margin: 0 auto;
margin-top: 50px;
padding: 10px;
}
Для нашего блока задана ширина в 400px, плюс по бокам с двух сторон есть пэддинги по 10px, всего получаем 420рх, а в консоли получили 406рх, так как 14рх занимает полоса прокрутки.
Если же в стилях добавить свойство
Код
box-sizing: border-box;
то в консоли мы уже увидим другие размеры, потому что пэддинги будут включаться в ширину элемента, в указанные в стилях 400рх, а так как вычитается ширина полосы прокрутки в 14рх, то в итоге получается 386:
При помощи этих свойств, например, мы можем получить ширину и высоту модального окна и дополнительно что-то с ним сделать.
Если нужно получить блок с учётом полосы прокрутки и бордеров, то используются свойства
offsetWidth и
offsetHeight Код
const width = box.offsetWidth;
const height = box.offsetHeight;
console.log(width, height);
И получаем результат в консоли:
Эти размеры совпадают с размерами ширины и высоты блока, заданными в его css-стилях.
Код
.box {
width: 400px;
height: 350px;
overflow: scroll;
margin: 0 auto;
margin-top: 50px;
padding: 10px;
}
Но элемент внутри блока за счёт прокрутки по высоте на самом деле гораздо больше, чем 350рх.
Для этого у нас есть следующее свойство, называется оно
scroll, чаще всего используется
scrollHeight, поскольку с ним мы получаем полную высоту элемента даже с учетом его невидимой части.
Код
const width = box.scrollWidth;
const height = box.scrollHeight;
console.log(width, height);
полученные знания практически, например, решить задачу подобного рода: при нажатии на кнопку блок текста полностью раскрывается, показывается всё, что было скрыто в прокрутке.
Получаем кнопку со страницы:
Код
const btn = document.querySelector('button');
И навешиваем на неё обработчик события клика, при этом внутри мы будем модифицировать наш блок с классом .
box через инлайн-стили:
Код
btn.addEventListener('click', () => {
box.style.height = box.scrollHeight + 'px';
});
Одними из часто используемых в практике являются свойства
scrollTop и
scrollLeft.
Первое из них отражает сколько у нас отлистанного контента, который мы не видим. Это полезно, например, если нужно показать сколько пользователь уже пролистал от страницы.
Ещё одна особенность этих двух свойств в том, что, в отличие от вышеперечисленных других свойств, они могут быть модифицированы (а предыдущие свойства нет, они только для получения, считывания их значений).
Часто на практике необходимо получить координаты элемента на странице. В JavaScript координаты рассчитываются относительно верхнего левого угла экрана.
Существует метод
getBoundingClientRect, с помощью которого можно получить все координаты элемента.
Код
console.log(box.getBoundingClientRect());
Цитата
DOMRect {x: 560.7999877929688, y: 50, width: 400, height: 350, top: 50, …}
bottom: 400
height: 350
left: 560.7999877929688
right: 960.7999877929688
top: 50
width: 400
x: 560.7999877929688
y: 50
Если бы мы использовали css, то
right бы у нас отсчитывалось от правой границы окна браузера до элемента, в JavaScript - от левой границы до правой границы элемента.
Похожая картина и с
bottom, рассчитывается от верхней границы браузера до нижней границы элемента.
Раз у нас есть этот объект, мы можем получать его отдельные свойства, чтобы использовать их в своих скриптах, например, в каких-то анимациях.
Так можно получить значение
top Код
console.log(box.getBoundingClientRect().top); // 50
Как получить стили, которые уже были применены при помощи css к элементу на странице
Для этого нам понадобится метод
getComputedStyle (кстати, уже применённые к элементу стили, или "
компьютед-стили", можно посмотреть в консоли браузера во вкладке
Elements -> Computed)
Эти компьютед-стили мы можем только считывать, но не изменять.
Код
const style = window.getComputedStyle(box);
console.log(style);
Получим вот такой объект:
Из которого мы можем получить какое-то свойство, например:
Код
console.log(style.display); // block
При помощи метода
getComputedStyle мы можем получать стили псевдоэлементов, прописывая их как второй аргумент для элемента:
Код
const style = window.getComputedStyle(box, ...);
Особенности работы метрик для document
Узнать сколько уже пролистано от страницы:
Код
console.log(document.documentElement.clientWidth);
Точно также работает и со
scrollTop Код
console.log(document.documentElement.scrollTop);
Если сделать такую запись, то страница прокрутится вверх (например, по клику на кнопке)
Код
document.documentElement.scrollTop = 0;
Добавлять комментарии могут только зарегистрированные пользователи.
