Свойство clientWidth
Пример
Получить высоту и ширину элемента <div>, включая отступы:
var elmnt = document.getElementById("myDIV");
var txt = "Высота с отступом: " + elmnt.clientHeight + "px<br>";
txt += "Ширина с отступом: " + elmnt.clientWidth + "px";
Попробуйте сами »
Дополнительные примеры "Попробуй сам" приведены ниже.
Определение и использование
Свойство clientWidth возвращает видимую ширину элемента в пикселях, включая отступы, но не границу, полосу прокрутки или поле.
Причина, по которой указано слово "видимый", заключается в том, что если содержимое элемента шире фактической ширины элемента, это свойство вернет только видимую ширину (см. "Ещё примеры").
Примечание: Чтобы понять это свойство, вы должны понимать CSS Box Модель.
Совет: Это свойство часто используется вместе с свойством clientHeight.
Совет: Используйте свойства offsetHeight и offsetWidth, возвращающие видимую высоту и ширину элемента, включая отступы, границу и полосу прокрутки.
Совет: To add scrollbars to an element, use the CSS overflow property.
Это свойство доступно только для чтения.
Поддержка браузера
Свойство | |||||
---|---|---|---|---|---|
clientWidth | Да | Да | Да | Да | Да |
Синтаксис
element.clientWidth
Технические детали
Возвращает значение | Число, представляющее видимую ширину элемента в пикселях, включая отступы |
---|
Ещё примеры
Пример
Этот пример демонстрирует разницу между clientHeight/clientWidth and offsetHeight/offsetWidth:
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Высота с отступом: " + elmnt.clientHeight + "px<br>";
txt += "Высота с отступом и границей: " + elmnt.offsetHeight + "px<br>";
txt += "Ширина с отступом: " + elmnt.clientWidth + "px<br>";
txt += "Ширина с отступом и границей: " + elmnt.offsetWidth + "px";
Попробуйте сами »
Пример
Этот пример демонстрирует разницу между clientHeight/clientWidth и offsetHeight/offsetWidth, когда мы добавляем полосу прокрутки к элементу:
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Высота с отступом: " + elmnt.clientHeight + "px<br>";
txt += "Высота с отступом, граница и полоса прокрутки: " + elmnt.offsetHeight + "px<br>";
txt += "Ширина с отступом: " + elmnt.clientWidth + "px<br>";
txt += "Ширина с отступом, граница и полоса прокрутки: " + elmnt.offsetWidth + "px";
Попробуйте сами »