Размеры документа

Umbrella JS — лёгкая библиотека для манипуляции DOM, которая предоставляет удобные методы для работы с элементами и документом в целом. Одной из часто необходимых задач при работе с веб-страницами является получение размеров элементов и окна браузера. Umbrella JS упрощает эти операции благодаря лаконичному API.

Получение размеров окна браузера

Для определения текущей ширины и высоты окна используются методы windowWidth() и windowHeight(). Они возвращают числовое значение в пикселях, соответствующее размеру видимой области окна браузера.

u().windowWidth();  // вернёт ширину окна
u().windowHeight(); // вернёт высоту окна

Особенности:

  • Значения учитывают только видимую область окна, без учёта полос прокрутки.
  • Методы полезны при реализации адаптивного дизайна или динамического расположения элементов.

Получение размеров элементов

Umbrella JS предоставляет метод width() и height(), который работает как для получения, так и для установки размеров элементов.

let elementWidth = u('#myElement').width();   // ширина элемента
let elementHeight = u('#myElement').height(); // высота элемента

Если в метод передать числовое значение, оно будет установлено в качестве новой ширины или высоты:

u('#myElement').width(300);  // установит ширину 300px
u('#myElement').height(150); // установит высоту 150px

Ключевые моменты:

  • Метод возвращает только контентную ширину и высоту без учёта внутренних отступов и границ (padding и border исключены).
  • При передаче значения оно автоматически интерпретируется как пиксели.

Работа с полной и внутренней шириной/высотой

Для более точного контроля над размерами элемента Umbrella JS предлагает методы innerWidth(), innerHeight(), outerWidth() и outerHeight().

  • innerWidth() / innerHeight() возвращают размеры элемента вместе с внутренними отступами (padding), но без границ и внешних отступов.
  • outerWidth() / outerHeight() возвращают размеры элемента вместе с границами и, при необходимости, внешними отступами.
let innerW = u('#myElement').innerWidth();
let outerH = u('#myElement').outerHeight(true); // true включает внешние отступы

Важно:

  • Для методов outerWidth() и outerHeight() можно передавать булевый параметр true, чтобы включить внешние отступы (margin) в вычисляемое значение.
  • Эти методы позволяют корректно позиционировать элементы при динамическом изменении структуры страницы.

Размеры документа

Определение полной ширины и высоты документа, а не только окна, осуществляется через documentWidth() и documentHeight():

let docWidth = u().documentWidth();
let docHeight = u().documentHeight();

Особенности:

  • Эти методы возвращают размеры всей страницы, включая область, скрытую за прокруткой.
  • Полезны при реализации скролл-эффектов, динамического подгружения контента и проверки полного размера страницы.

Сравнение размеров элементов и окна

Иногда требуется вычислить видимую часть элемента относительно окна:

let el = u('#myElement');
let elHeight = el.height();
let windowHeight = u().windowHeight();

if (elHeight > windowHeight) {
    console.log('Элемент выше видимой области окна');
}

Примечание:

  • Использование этих методов совместно позволяет реализовать адаптивную подгонку контента, плавную анимацию появления элементов и корректное позиционирование всплывающих окон.

Манипуляции с размерами при изменении окна

Umbrella JS поддерживает обработку событий изменения размера окна через метод on():

u(window).on('resize', function() {
    let w = u().windowWidth();
    let h = u().windowHeight();
    console.log(`Новая ширина: ${w}, новая высота: ${h}`);
});

Рекомендации:

  • Проверка размеров при событии resize позволяет динамически подстраивать элементы под новое разрешение.
  • Можно комбинировать с методами innerWidth и outerHeight для точного позиционирования элементов.

Установка размеров с учётом единиц измерения

Методы width() и height() по умолчанию работают с пикселями, но можно использовать строки с другими единицами:

u('#myElement').width('50%');  // ширина 50% от родителя
u('#myElement').height('10em'); // высота в em

Особенности:

  • Любые CSS-единицы поддерживаются.
  • При получении значения методом width() или height() возвращается числовое значение в пикселях, даже если в CSS используется процентная или относительная единица.

Совместное использование размеров и анимаций

Umbrella JS позволяет плавно изменять размеры элементов через метод animate():

u('#myElement').animate({ width: 400, height: 200 }, 500); // 500 мс

Примечание:

  • Все методы работы с размерами интегрируются с анимацией.
  • Можно комбинировать с innerWidth и outerHeight для создания динамически изменяющихся элементов интерфейса.

Практические рекомендации

  1. Для вычислений, зависящих от реального отображения элемента на странице, лучше использовать outerWidth(true) и outerHeight(true), чтобы учесть все отступы и границы.
  2. Для проверки видимости элемента в окне — комбинировать windowHeight/windowWidth с координатами элемента через метод offset().
  3. Для адаптивных макетов — опираться на documentWidth и documentHeight для корректного расчёта области контента и подгрузки динамических элементов.

Методы работы с размерами в Umbrella JS обеспечивают компактный и предсказуемый API, позволяя выполнять сложные операции по измерению и изменению размеров без громоздких вычислений через чистый JavaScript.

Оглавление