Свойство clientHeight элемента HTML DOM

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

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

clientHeight Свойство является только чтением.

См. также:Урок по CSS Box Model

См. также:

свойство clientWidth

свойство clientTop

свойство clientLeft

свойство offsetHeight

свойство offsetWidth

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

Пример

Пример 1

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

const element = document.getElementById("myDIV");
let text = "clientHeight: " + element.clientHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px";

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

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

Без滚动ной полосы:

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";

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

С滚动ной полосой:

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";

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

Синтаксис

element.clientHeight

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

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

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

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

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