Получение ширины и высоты элемента

Umbrella JS предоставляет лаконичные методы для работы с размерами элементов DOM, обеспечивая удобный доступ к ширине, высоте и связанным свойствам. Работа с размерами элементов важна при построении динамических интерфейсов, адаптивной вёрстки и анимаций.

Методы .width() и .height()

Методы .width() и .height() позволяют получить текущие размеры первого элемента в наборе, выбранном с помощью u(). Эти методы возвращают числовое значение в пикселях, исключая единицы измерения.

Пример использования:

let elementWidth = u('#box').width();
let elementHeight = u('#box').height();

console.log('Ширина элемента:', elementWidth);
console.log('Высота элемента:', elementHeight);

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

  • Возвращается ширина без учета границ и внутренних отступов (padding).
  • Аналогично, метод .height() возвращает высоту содержимого без внутренних отступов и границ.

Включение внутренних отступов с .innerWidth() и .innerHeight()

Для получения размеров, включая внутренние отступы (padding), используются методы .innerWidth() и .innerHeight():

let innerW = u('#box').innerWidth();
let innerH = u('#box').innerHeight();

console.log('Ширина с padding:', innerW);
console.log('Высота с padding:', innerH);

Эти методы учитывают только padding, не включая границы (border) и внешние отступы (margin).

Учет границ с .outerWidth() и .outerHeight()

Методы .outerWidth() и .outerHeight() возвращают размеры элемента вместе с padding и border.

let outerW = u('#box').outerWidth();
let outerH = u('#box').outerHeight();

console.log('Ширина с padding и border:', outerW);
console.log('Высота с padding и border:', outerH);

Дополнительно, методы принимают булевый параметр true, чтобы включить внешние отступы (margin) в расчет:

let fullWidth = u('#box').outerWidth(true);
let fullHeight = u('#box').outerHeight(true);

console.log('Полная ширина с margin:', fullWidth);
console.log('Полная высота с margin:', fullHeight);

Динамическое изменение размеров

Umbrella JS позволяет не только получать размеры, но и задавать их. Методы .width(value) и .height(value) принимают число или строку с единицами измерения:

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

При передаче числового значения оно автоматически интерпретируется как пиксели. Это упрощает адаптивную подстройку элементов и создание интерактивных интерфейсов.

Работа с несколькими элементами

Если набор элементов содержит несколько DOM-узлов, методы .width() и .height() возвращают значение только для первого элемента. Для изменения размеров всех элементов можно использовать цикл через метод .each():

u('.boxes').each(function(el) {
    u(el).width(150);
    u(el).height(150);
});

Таким образом можно управлять группой элементов одновременно, сохраняя лаконичность кода.

Различие между .width() и clientWidth

Методы Umbrella JS дают преимущество в простоте и единообразии API по сравнению с прямым обращением к свойствам DOM, таким как element.clientWidth или element.offsetWidth.

  • .width() и .height() → размеры содержимого (content).
  • .innerWidth() / .innerHeight() → content + padding.
  • .outerWidth() / .outerHeight() → content + padding + border (+ margin при параметре true).

Примеры комплексного использования

Измерение и настройка размеров с учетом адаптивного интерфейса:

let mainBox = u('#main-box');

if (mainBox.width() < 300) {
    mainBox.width(300);
}

mainBox.outerHeight(true); // получение полной высоты с margin для вычисления позиции соседних блоков

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

Выводы по API размеров

  • width() / height() — базовые размеры содержимого.
  • innerWidth() / innerHeight() — размеры с padding.
  • outerWidth([includeMargin]) / outerHeight([includeMargin]) — размеры с padding, border и опционально margin.
  • Передача значения в методы .width(value) / .height(value) позволяет динамически изменять размеры элементов.
  • Для работы с группами элементов используется метод .each().

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

Оглавление