Метод offsetHeight
Пример element.offsetHeight
Отобразить высоту и ширину "myDIV", включая отступы и границу:
const elmnt = document.getElementById("myDIV");
let text = "Высота с отступом и границей: " + elmnt.offsetHeight + "px<br>";
text += "Ширина с отступом и рамкой: " + elmnt.offsetWidth + "px";
Попробуйте сами »
Ещё примеры ниже.
Описание offsetHeight
Свойство offsetHeight возвращает видимую высоту элемента (в пикселях), включая отступ, границу и полосу прокрутки, но не поле.
Идентификатор свойства offsetHeight доступен только для чтения.
Учебник: offsetHeight
offsetParent и offsetHeight
Все элементы блочного уровня сообщают смещения относительно родительского смещения:
- offsetTop
- offsetLeft
- offsetWidth
- offsetHeight
Смещенный родительские элемент — это ближайший предок элемента, имеющий позицию, отличную от статической.
Если смещенный родительские элемент не существует, смещение выполняется относительно тела документа.
Связные страницы offsetHeight
Синтаксис offsetHeight
element.offsetHeight
Возвращаемое значение offsetHeight
| Тип | Описание |
|---|---|
| Number | Видимая высота элемента (в пикселях), включая отступы, границу и полосу прокрутки. |
Разница между clientHeight/clientWidth и offsetHeight/offsetWidth offsetHeight
Без полосы прокрутки:
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";
Попробуйте сами »
Поддержка offsetHeight
element.offsetHeight поддерживается во всех браузерах:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Да | Да | Да | Да | Да | Да |