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