Элемент HTML DOM clientHeight
❮ Элемент объектаПример
Получите высоту и ширину «myDIV», включая отступы:
const elmnt = document.getElementById("myDIV");
let text = "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px";
Ниже приведены дополнительные примеры.
Определение и использование
Свойство clientHeight
возвращает видимую высоту элемента в пикселях, включая отступы, но не границу, полосу прокрутки или поля.
Свойство clientHeight
доступно только для чтения.
Руководство:
Смотрите также:
Свойство offsetHeight элемента
Чтобы добавить полосы прокрутки к элементу, используйте свойство переполнения CSS.
Синтаксис
element.clientHeight
Возвращаемое значение
Тип | Описание |
Число | Видимая высота элемента (в пикселях), включая отступы. |
Разница между clientHeight/clientWidth и offsetHeight/offsetWidth
Без полосы прокрутки:
const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";
С полосой прокрутки:
const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";
Поддержка браузера
element.clientHeight
поддерживается во всех браузерах:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes | Yes |
❮ Элемент объекта