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