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