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

Dom7 — это облегчённая и высокопроизводительная библиотека для работы с DOM, изначально созданная для фреймворка Framework7, но полностью совместимая с любым проектом на JavaScript. Одной из важных возможностей Dom7 является работа с размерами элементов на странице, что необходимо для точной верстки, анимаций и динамических интерфейсов.

Методы для получения размеров

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

1. width() и height()

Методы width() и height() возвращают внутреннюю ширину и высоту элемента без учёта padding и border. Если коллекция содержит несколько элементов, возвращается размер первого элемента.

const el = $('.box'); // выбираем элемент
const boxWidth = el.width();
const boxHeight = el.height();
console.log(boxWidth, boxHeight);

Ключевой момент: если элемент скрыт через display: none, эти методы могут вернуть 0, так как элемент не имеет размеров в DOM.

2. outerWidth([includeMargins]) и outerHeight([includeMargins])

Эти методы возвращают полные размеры элемента, включая padding и border. Аргумент includeMargins позволяет добавить к результату внешние отступы.

const el = $('.box');
const fullWidth = el.outerWidth(true); // с учётом margin
const fullHeight = el.outerHeight();   // без margin
console.log(fullWidth, fullHeight);

Особенность: при передаче true учитываются все внешние отступы, что полезно при позиционировании элементов относительно соседних блоков.

3. offset()

Метод offset() возвращает объект с координатами элемента относительно документа, а не относительно окна просмотра.

const el = $('.box');
const position = el.offset();
console.log(position.top, position.left);

Возвращаемый объект имеет два свойства:

  • top — расстояние от верхнего края документа до верхнего края элемента.
  • left — расстояние от левого края документа до левого края элемента.

Применение: удобно для вычисления абсолютного положения элемента при прокрутке страницы или позиционировании всплывающих окон.

4. position()

Метод position() возвращает координаты элемента относительно родительского контейнера с позиционированием, то есть ближайшего родителя с position: relative, absolute или fixed.

const el = $('.box');
const pos = el.position();
console.log(pos.top, pos.left);

Разница с offset() заключается в том, что position() игнорирует прокрутку документа и вычисляет положение внутри родителя, что полезно для работы с внутренними контейнерами.

Практические нюансы

  • Элементы с display: none: Методы, возвращающие размеры (width, height, outerWidth, outerHeight), не будут корректны для скрытых элементов. Для получения размеров скрытых элементов часто используют временное отображение через visibility: hidden или position: absolute; left: -9999px.

  • Процентные значения: Методы возвращают размеры в пикселях, даже если CSS задан в процентах или em. Это обеспечивает точность при вычислениях и анимациях.

  • Коллекции элементов: Если выборка Dom7 содержит несколько элементов, методы размеров применяются только к первому элементу коллекции. Для получения размеров каждого элемента нужно перебрать коллекцию через .each().

$('.box').each((index, el) => {
  const w = $(el).width();
  const h = $(el).height();
  console.log(`Элемент ${index}: ${w}x${h}`);
});

Сравнение offset() и position()

Метод Относительно чего Учитывает прокрутку Включает margin Включает padding и border
offset() Документ Да Нет Да
position() Родитель Нет Нет Да

Работа с окнами и viewport

Dom7 позволяет получать размеры окна и области просмотра через объект window.

const viewportWidth = $(window).width();
const viewportHeight = $(window).height();
console.log(viewportWidth, viewportHeight);

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

Комбинированное использование

Размеры элементов часто комбинируются с динамическим изменением стилей. Пример: центрирование элемента внутри родителя.

const parent = $('.container');
const child = $('.modal');

const parentWidth = parent.width();
const parentHeight = parent.height();

const childWidth = child.outerWidth();
const childHeight = child.outerHeight();

child.css({
  left: (parentWidth - childWidth) / 2 + 'px',
  top: (parentHeight - childHeight) / 2 + 'px'
});

Такой подход позволяет создавать адаптивные и интерактивные интерфейсы без сторонних библиотек.

Оглавление