JavaScript: 4 способа получить width и height элемента

Как получить ширину и высоту HTML элемента с помощью обычного (чистого) JavaScript.

Vanilla JavaScript (нативный JavaScript) уже давно позволяет кроссбраузерно получить размеры HTML элемента, без использования сторонних библиотек вроде jQuery. Не все пользуются этой возможностью, возможно потому что у блока есть несколько размеров (с отступами и без них) и не всегда понятно как и какой получить и где и какой использовать. Давайте разберемся, как получить ширину и высоту элемента используя встроенные в браузер JS методы и чем они друг от друга отличаются.

Оглавление:

CSS Box Model

Что такое Box Model и как она влияет на размеры элемента (ширину и высоту).

Элемент HTML можно представить как коробку (box), которая состоит из четырех областей (частей):

CSS Box Model
  • margin - внешний отступ - пустое пространство вокруг элемента.
  • border - рамка - вокруг контента.
  • padding - внутренний отступ - пустая пространство, вокруг контента.
  • content - текст и другие элементы.

box-sizing

Какая именно будет высота и ширина зависит от CSS свойства box-sizing:

  • box-sizing: content-box - размер коробки измеряется относительно контента.
    Т.е. говорит браузеру, что размеры указанные в width и height относятся только к контенту. А padding и border не входят в указанные width и height и добавляются дополнительно, делая размер всего элемента больше, чем указано в width и height.

  • box-sizing: border-box - размер коробки измеряется относительно border (рамки).
    Т.е. говорит браузеру, что в указанные размеры для width и height входит все: content, padding и border.

По умолчанию в браузерах используется box-sizing: content-box.

Как получить ширину и высоту элемента в JS?

Здесь есть как минимум четыре варианта. Каждый из них имеет свои особенности и подойдет в зависимости от того, какой именно размер вам нужен. Рассмотрим каждый.

offsetHeight и offsetWidth

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

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

// int значение ширины: content + padding + border.
element.offsetWidth; // 110

// int значение высоты: content + padding + border.
element.offsetHeight; // 60

Значения округляются до целого числа (не float).

clientHeight и clientWidth

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

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

// int значение ширины: content + padding (без border).
element.clientWidth;  // 100

// int значение высоты: content + padding (без border).
element.clientHeight; // 50

Значения округляются до целого числа (не float).

Метод getBoundingClientRect()

Метод getBoundingClientRect() возвращает объект, содержащий все размеры элемента и размеры его положения относительно области просмотра (viewport).

ВАЖНО: width и height метода getBoundingClientRect() вернут значение, основанное на свойстве CSS box-sizing элемента. Например, при box-sizing: border-box ширина и высота будут включать padding и border.

const element = document.querySelector( '.element' );
const rect = element.getBoundingClientRect()

rect.width    // 945.59
rect.height   // 48.62

rect.right    // 1162.79
rect.bottom   // 132.44

rect.top      // 83.82
rect.y        // 83.82

rect.left     // 217.19
rect.x        // 217.19
height bottom x left y width right Introduction This Ecma Standard is based on several originating technologies, the most well known being JavaScript (Netscape) and JScript (Microsoft). The language was invented by Brendan Eich at top

Метод window.getComputedStyle()

Глобальный метод getComputedStyle() возвращает объект, содержащий значения всех вычисленных на данный момент CSS-свойств элемента. Каждое значение CSS доступно через одноименное свойство и имеет строковый тип.

ВАЖНО: width и height свойства объекта getComputedStyle() содержат значения, основанные на свойстве box-sizing элемента. Например, при box-sizing: border-box ширина и высота будут включать padding и border.

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

// строковое значение ширины content в px
getComputedStyle( element ).width; // 945.597px

// строковое значение ширины content в px
getComputedStyle( element ).height; // 501.597px

Чтобы получить число, просто оберните результат в parseInt() или parseFloat():

parseInt( getComputedStyle( element ).height );   // 501
parseFloat( getComputedStyle( element ).height ); // 501.597

--

Смотрите также: https://nikitahl.com/4-ways-to-get-the-width-and-height-of-an-element-with-vanilla-javascript