Свойство HTML DOM offsetHeight Property

元素对象参考手册Объект Element

Пример

Получите высоту элемента div, включая padding и border:

var elmnt = document.getElementById("myDIV"); var txt = "Высота элемента div, включая padding и border:" + elmnt.offsetHeight + "px<br>"; txt += "Ширина элемента div, включая padding и border:" + elmnt.offsetWidth + "px";

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

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

Свойство offsetHeight — это свойство только для чтения, которое возвращает высоту элемента в пикселях, включая padding и border, исключая margin, в виде целого числа в пикселях px.

Обычно offsetHeight элемента — это мера CSS-высоты элемента, включая border, padding элемента и горизонтальную полосу прокрутки (если она присутствует и отображается), но исключая:beforeили:afterвысоту псевдоэлементов и т. д.

Для объекта body документа он включает линейную общую высоту содержимого вместо CSS-высоты элемента. Высота содержимого, простирающегося вниз от плавающих элементов, игнорируется.

Если элемент скрыт (например, у элемента или одного из его элементов-предковstyle.displayустановлено значениеnone), возвращается 0.

Примечание:Чтобы понять это свойство, обратитесь кблочной модели CSS。

Совет:Это свойство обычно используется вместе со свойствомoffsetWidth.

Совет:Используйте clientHeightиclientWidth— свойства, возвращающие видимую высоту и ширину элемента, включая только padding.

Совет:Чтобы добавить полосу прокрутки к элементу, можно использовать свойствоoverflow.

Это свойство только для чтения.


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

Свойство
offsetHeight Да Да Да Да Да

Синтаксис

element.offsetHeight

Технические детали

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

Другие примеры

Пример

Следующий пример демонстрирует разницу между свойствами clientHeight/clientWidth и offsetHeight/offsetWidth:

var elmnt = document.getElementById("myDIV"); var txt = ""; txt += "Высота включает padding:" + elmnt.clientHeight + "px<br>"; txt += "Высота включает padding и border:" + elmnt.offsetHeight + "px<br>"; txt += "Ширина включает padding:" + elmnt.clientWidth + "px<br>"; txt += "Ширина включает padding и border:" + elmnt.offsetWidth + "px";

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

Пример

Следующий пример демонстрирует разницу между свойствами clientHeight/clientWidth и offsetHeight/offsetWidth после добавления полосы прокрутки к элементу:

var elmnt = document.getElementById("myDIV"); var txt = ""; txt += "<b>Информация о стиле div:</b><br>"; txt += "Высота включает padding:" + elmnt.clientHeight + "px<br>"; txt += "Высота включает padding, border и полосу прокрутки:" + elmnt.offsetHeight + "px<br>"; txt += "Ширина включает внутренние отступы:" + elmnt.clientWidth + "px<br>"; txt += "Ширина включает внутренние отступы, границу и полосу прокрутки:" + elmnt.offsetWidth + "px";

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


元素对象参考手册Объект Element

Другие расширения