HTML DOM свойство clientWidth

Объект элемента HTML DOM

clientWidthЧтение только свойство возвращает видимую ширину элемента (в пикселях), включая наполнение, но не включая границу, отступ и вертикальную полосу прокрутки (если она есть).

Формула расчета clientWidth: CSS width + CSS padding - ширина вертикальной полосы прокрутки (если она есть).

Чтобы понять это свойство, вам нужно понятьCSS Box Model.

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

Грамматика:

element.clientWidth

var elem = document.querySelector("div");
var txt = "Высота включает наполнение: " + elem.clientHeight + "px<br>";
txt += "Ширина включает наполнение: " + elem.clientWidth + "px";

Совместимость браузеров

Все браузеры полностью поддерживают свойство clientWidth:

Технические детали

Более примеров

Этот пример демонстрирует различие между clientWidth и offsetWidth:

var elem = document.querySelector("div");
var txt = "Ширина включает прокрутку: " + elem.clientWidth + "px<br>";
txt += "Ширина включает прокрутку + рамку: " + elem.offsetWidth + "px";

См. также

Референс HTML DOM:Свойство offsetWidth HTML DOM

Референс HTML DOM:Свойство scrollWidth HTML DOM

Референс CSS:Свойство overflow CSS

Объект элемента HTML DOM