HTML DOM свойство offsetWidth
Пример
Получите высоту и ширину элемента <div>, включая отступы и границу:
var elmnt = document.getElementById("myDIV");
var txt = "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Свойство offsetWidth возвращает видимую ширину элемента в пикселях, включая отступы, границу и полосу прокрутки, но не поля.
Причина, по которой указывается слово «видимое», заключается в том, что если содержимое элемента шире фактической ширины элемента, это свойство вернет только видимую ширину (см. «Дополнительные примеры»).
Примечание. Чтобы понять это свойство, вы должны понимать блочную модель CSS .
Совет: это свойство часто используется вместе со свойством offsetHeight .
Совет. Используйте свойства clientHeight и clientWidth , чтобы вернуть видимую высоту и ширину элемента, включая только отступы.
Совет. Чтобы добавить полосы прокрутки к элементу, используйте свойство переполнения CSS.
Это свойство доступно только для чтения.
Поддержка браузера
Property | |||||
---|---|---|---|---|---|
offsetWidth | Yes | Yes | Yes | Yes | Yes |
Синтаксис
element.offsetWidth
Технические детали
Возвращаемое значение: | Число, представляющее видимую ширину элемента в пикселях, включая отступы, границу и полосу прокрутки. |
---|
Дополнительные примеры
Пример
Этот пример демонстрирует разницу между clientHeight/clientWidth и offsetHeight/offsetWidth:
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
Пример
Этот пример демонстрирует разницу между clientHeight/clientWidth и offsetHeight/offsetWidth, когда мы добавляем к элементу полосу прокрутки:
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";