Главная » Параметры документа,окна и работа с ними

Параметры документа,окна и работа с ними


09.05.2021, 23:06
Document - объект, который содержит всю html-структуру страницы.

Window - окно, в котором отображается документ (при изменении размеров окна браузера изменяется и window, при этом document не затрагивается)

Screen (экран) - весь видимый монитор (включая системные панели и прочее)

Свойства

Ширина и высота элемента, включая padding, но без margin, бордеров и прокрутки:

clientWidth и clientHeight



Код

const box = document.querySelector('.box'); /* получили элемент со страницы */

const width = box.clientWidth; /* находим его ширину */
const height = box.clientHeight; /* находим его высоту */

Ширина и высота элемента, включая padding, margin, бордеры и полосу прокрутки:

offsetWidth и offsetHeight



Высота элемента, включая его невидимую часть из-за прокрутки:

scrollHeight



Используя это свойство, можно реализовать показ элемента полностью, например, при клике на кнопку:

Код

const box = document.querySelector('.box'), /* получаем элемент */
  btn = document.querySelector('button'); /* получаем кнопку */

btn.addEventListener('click', () => {
  box.style.height = box.scrollHeight + 'px'; /* задаём элементу его полную высоту при клике на кнопку */
});

scrollTop позволяет узнать, сколько уже есть отлистанного контента, который уже скрыт (можно использовать для реализации прогресс-бара, при пролистывании страницы пользователем)

В отличие от всех вышеперечисленных свойств, свойства scrollTop и scrollLeft могут быть модифицированы

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

Получить все координаты элемента можно с помощью метода getBoundingClientRect()

Код

const box = document.querySelector('.box');

console.log(box.getBoundingClientRect()); // => в консоли получим все координаты элемента в виде объекта


В консоли мы получаем координаты и размеры элемента, а также расстояния от элемента до краёв окна

значение right в данном случае рассчитывается от левой границы окна до правой границы элемента
значение bottom от верхней границы окна до нижней границы элемента

Так как с помощью метода мы получили на выходе объект, можно получить отдельную координату элемента, например:

Код

console.log(box.getBoundingClientRect().top); // => получим значение расстояния до объекта от верхней границы окна

Метод getComputedStyle() позволяет узнать css-стили, которые уже были применены к элементу.

Computed-стили можно посмотреть в консоли разработчика во вкладке Elements, в подвкладке Computed


В Computed показываются стили, которые уже применены к элементу, например, в css-стилях может быть указано margin: auto, а во вкладке Computed уже будут конкретные значения отступов

Мы можем получать Computed-стили с помощью скриптов, но изменять напрямую их не можем.

Получить Computed-стили для элемента можно так:

Код

const box = document.querySelector('.box');

const style = window.getComputedStyle(box);
console.log(style);  


Получаем объект со всеми стилями, которые уже применились к этому элементу

Можно вывести отдельное свойство этого объекта, к примеру, display

Код

console.log(style.display); // => block

Метод getComputedStyle() позволяет также получать стили псевдоэлементов. Для этого у метода в качестве второго аргумента указывают псевдоэлемент того элемента, к которому он относится.

Computed-стили приходят непосредственно из css, то что прописывается в JavaScript через .style - это inline-стили.

Inline-стили более приоритетны.

КОММЕНТАРИИ (0)

РЕЙТИНГ МАТЕРИАЛА (0.0 / 0)