Параметры документа, окна и работа с ними
В этом уроке мы разберем глобальные объекты document, window, screen и параметры, которые есть у каждого элемента в JS.
Document - по факту, объект, содержащий в себе всю html-структуру страницы сайта.
Window - окно, в котором отображается документ. При изменении размера окна браузера, изменяется и Window.
Screen - экран, по факту, всё, что вы видите перед собой на экране монитора.
Получить ширину или высоту элемента, включая padding, но без border, margin и прокрутки, используем:
clientWidth и clientHeight
Для примера разбираем данный элемент страницы (блок с длинным текстом)
Блок представляет собой обычный div с классом .box, в котором много текста, и после блока есть кнопка
Стили блока:
Получаем блок со страницы:
Допустим, при работе нам понадобились ширина и высота этого блока без учёта margin и border
Выводим значения этих переменных в консоль браузера:
В css-стилях для блока .box указаны ширина 400px, высота 355px.
Так как изначально ширина указана 400px и боковые padding по 20px, то общая ширина получается 420px. Полоса прокрутки в ширину занимает 15px, 420 - 15 = 405px. Эту цифру мы и видим в консоли браузера.
Если для стилей блока .box добавить свойство box-sizing со значением border-box, то в консоли мы увидим другие значения:
Так происходит потому, что боковые padding по 20px уже включаются в ширину 400px. Полоса прокрутки в ширину занимает 15px, 400 - 15 = 385px. Эту цифру мы и видим в консоли браузера.
Получить размеры с учётом полосы прокрутки, border и margin:
Мы получили именно те значения, что изначально прописаны в css.
Получить полную высоту элемента с учётом прокрутки (невидимой части):
По ширине 15px ушло на полосу прокрутки, 400 - 15 = 385. По высоте 1382px это полная высота с учётом всех прокруток.
Как можно использовать эти знания?
Например, реализовать функционал, в котором, при клике на кнопку, блок кода с текстом раскрывается полностью на всю его длину.
scrollTop - позволяет узнать, сколько уже отлистано контента (который не видно уже).
Наряду со свойством scrollLeft, scrollTop может быть модифицировано (можно изменять), в отличие от всех других свойств, которые можно лишь считывать.
В JS отсчёт координат ведётся от верхнего левого угла.
Метод, позволяющий получить все координаты элемента:
Координаты получены в виде объекта. Свойства данного объекта мы можем использовать в своих скриптах.
Так можно получить отдельное значение из объекта
Мы можем получить те стили, которые уже применены к элементу на странице (Computed style):
Данные стили изменять напрямую мы не можем, мы можем получать их значение.
Например:
При помощи метода getComputedStyle() можно получать стили псевдоэлементов.
Не стоит путать Computed-стили и инлайн-стили из скрипта. Первые идут из css и изначально появляются на странице, вторые появляются внутри вёрстки и прописываются прямо в тег. Соответственно, инлайн-стили более приоритетны и переопределяют стили из css.
Узнать количество пикселов, которое пользователь отлистал на странице:
Также и с scrollTop
Так как мы можем изменять вручную scrollTop, на этом можно построить функционал прокрутки страницы вверх, в самое начало страницы.
Например, пользователь пролистал страницу до конца, нажимаем кнопку и страница пролистывается обратно в самое начало.
Что-то типа этого:
Для window есть два метода, которые скроллят страницу.
Метод scrollBy() скроллит страницу относительно текущего положения, поэтому имеет в качестве параметров координаты x и y
Метод scrollTo() работает относительно всей страницы, а не текущего положения.
Document - по факту, объект, содержащий в себе всю html-структуру страницы сайта.
Window - окно, в котором отображается документ. При изменении размера окна браузера, изменяется и Window.
Screen - экран, по факту, всё, что вы видите перед собой на экране монитора.
Получить ширину или высоту элемента, включая padding, но без border, margin и прокрутки, используем:
clientWidth и clientHeight
Для примера разбираем данный элемент страницы (блок с длинным текстом)
Блок представляет собой обычный div с классом .box, в котором много текста, и после блока есть кнопка
Код
<button>Click</button>
Стили блока:
Код
.box {
width: 400px;
height: 350px;
overflow: scroll;
margin: 0 auto;
margin-top: 50px;
padding: 10px;
}
width: 400px;
height: 350px;
overflow: scroll;
margin: 0 auto;
margin-top: 50px;
padding: 10px;
}
Получаем блок со страницы:
Код
const box = document.querySelector('.box');
Допустим, при работе нам понадобились ширина и высота этого блока без учёта margin и border
Код
const width = box.clientWidth;
const height = box.clientHeight;
const height = box.clientHeight;
Выводим значения этих переменных в консоль браузера:
Код
console.log(width, height);
Цитата
405 355
В css-стилях для блока .box указаны ширина 400px, высота 355px.
Так как изначально ширина указана 400px и боковые padding по 20px, то общая ширина получается 420px. Полоса прокрутки в ширину занимает 15px, 420 - 15 = 405px. Эту цифру мы и видим в консоли браузера.
Если для стилей блока .box добавить свойство box-sizing со значением border-box, то в консоли мы увидим другие значения:
Цитата
385 335
Так происходит потому, что боковые padding по 20px уже включаются в ширину 400px. Полоса прокрутки в ширину занимает 15px, 400 - 15 = 385px. Эту цифру мы и видим в консоли браузера.
Получить размеры с учётом полосы прокрутки, border и margin:
Код
const width = box.offsetWidth;
const height = box.offsetHeight;
console.log(width, height);
const height = box.offsetHeight;
console.log(width, height);
Цитата
400 350
Мы получили именно те значения, что изначально прописаны в css.
Получить полную высоту элемента с учётом прокрутки (невидимой части):
Код
const width = box.scrollWidth;
const height = box.scrollHeight;
console.log(width, height);
const height = box.scrollHeight;
console.log(width, height);
Цитата
385 1382
По ширине 15px ушло на полосу прокрутки, 400 - 15 = 385. По высоте 1382px это полная высота с учётом всех прокруток.
Как можно использовать эти знания?
Например, реализовать функционал, в котором, при клике на кнопку, блок кода с текстом раскрывается полностью на всю его длину.
Код
const box = document.querySelector('.box');
const btn = document.querySelector('button');
btn.addEventListener('click', () => {
box.style.height = box.scrollHeight + 'px';
});
const btn = document.querySelector('button');
btn.addEventListener('click', () => {
box.style.height = box.scrollHeight + 'px';
});
scrollTop - позволяет узнать, сколько уже отлистано контента (который не видно уже).
Код
btn.addEventListener('click', () => {
console.log(box.scrollTop); // 453.6000061035156
});
console.log(box.scrollTop); // 453.6000061035156
});
Наряду со свойством scrollLeft, scrollTop может быть модифицировано (можно изменять), в отличие от всех других свойств, которые можно лишь считывать.
Работа с координатами
В JS отсчёт координат ведётся от верхнего левого угла.
Метод, позволяющий получить все координаты элемента:
Код
console.log(box.getBoundingClientRect());
Цитата
DOMRect {x: 568, y: 50, width: 400, height: 350, top: 50, …}
Координаты получены в виде объекта. Свойства данного объекта мы можем использовать в своих скриптах.
Так можно получить отдельное значение из объекта
Код
console.log(box.getBoundingClientRect().top); // 50
Мы можем получить те стили, которые уже применены к элементу на странице (Computed style):
Код
const style = window.getComputedStyle(box);
console.log(style);
console.log(style);
Данные стили изменять напрямую мы не можем, мы можем получать их значение.
Например:
Код
console.log(style.display); // block
При помощи метода getComputedStyle() можно получать стили псевдоэлементов.
Не стоит путать Computed-стили и инлайн-стили из скрипта. Первые идут из css и изначально появляются на странице, вторые появляются внутри вёрстки и прописываются прямо в тег. Соответственно, инлайн-стили более приоритетны и переопределяют стили из css.
Узнать количество пикселов, которое пользователь отлистал на странице:
Код
console.log(document.documentElement.clientWidth);
Также и с scrollTop
Код
console.log(document.documentElement.scrollTop);
Так как мы можем изменять вручную scrollTop, на этом можно построить функционал прокрутки страницы вверх, в самое начало страницы.
Например, пользователь пролистал страницу до конца, нажимаем кнопку и страница пролистывается обратно в самое начало.
Что-то типа этого:
Код
btn.addEventListener('click', () => {
document.documentElement.scrollTop = 0;
});
document.documentElement.scrollTop = 0;
});
Для window есть два метода, которые скроллят страницу.
Метод scrollBy() скроллит страницу относительно текущего положения, поэтому имеет в качестве параметров координаты x и y
Код
window.scrollBy(0, 400);
Метод scrollTo() работает относительно всей страницы, а не текущего положения.
Код
window.scrollTo(0, 400);
Всего комментариев: 0