Атрибут offsetHeight элемента HTML DOM

Определение и использование

offsetHeight Атрибут возвращает видимое высоту элемента (в пикселях), включая отступы, рамку и полосы прокрутки, но не включая отступы.

offsetHeight Атрибуты только для чтения.

См. также:Урок по CSS боксовой модели

offsetParent

Все блочные элементы گزارشляют смещение относительно смещенного родителя:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

Смещенный родитель означает ближайшего предка с нестатическим положением.

Если отсутствует смещенный родитель, смещение относительно основного текста документа.

См. также:

Атрибут offsetWidth

Атрибут offsetParent

Атрибут offsetTop

Атрибут offsetLeft

Атрибут clientTop

Атрибут clientLeft

Атрибут clientWidth

Атрибут clientHeight

Пример

Пример 1

Отображение высоты и ширины "myDIV", включая отступ и рамку:

const elmnt = document.getElementById("myDIV");
let text = "Высота с отступом и рамкой: " + elmnt.offsetHeight + "px<br>";
text += "Ширина с отступами и рамками: " + elmnt.offsetWidth + "px";

Попробуйте сами

Пример 2

Разница между clientHeight/clientWidth и offsetHeight/offsetWidth

С полосой прокрутки:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Высота с отступами: " + elmnt.clientHeight + "px<br>";
text += "Высота с отступами и рамками: " + elmnt.offsetHeight + "px<br>";
text += "Ширина с отступами: " + elmnt.clientWidth + "px<br>";
text += "Ширина с отступами и рамками: " + elmnt.offsetWidth + "px";

Попробуйте сами

Без полосы прокрутки:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Высота с отступами: " + elmnt.clientHeight + "px<br>";
text += "Высота с отступами, рамками и полосами прокрутки: " + elmnt.offsetHeight + "px<br>";
text += "Ширина с отступами: " + elmnt.clientWidth + "px<br>";
text += "Ширина с отступами, рамками и полосами прокрутки: " + elmnt.offsetWidth + "px";

Попробуйте сами

Синтаксис

element.offsetHeight

Возвратное значение

Тип Описание
Число Визуальная высота элемента (в пикселях), включая отступы, рамки и полосы прокрутки.

Поддержка браузеров

Все браузеры поддерживают element.offsetHeight:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка Поддержка