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

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

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

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

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

См. также:

свойство clientHeight

свойство 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

Пример 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.clientWidth

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

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

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

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

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