Свойство offsetWidth
Пример element.offsetWidth
Получите высоту и ширину "myDIV", включая отступы и границу:
const elmnt = document.getElementById("myDIV");
let text = "Высота с отступом и границей: " + elmnt.offsetHeight + "px<br>";
text += "Ширина с отступом и рамкой: " + elmnt.offsetWidth + "px";
Попробуйте сами »
Ещё примеры ниже.
Описание offsetWidth
Свойство offsetWidth возвращает видимую ширину элемента (в пикселях), включая отступ, границу и полосу прокрутки, но не поле.
Свойство offsetWidth доступно только для чтения.
Учебник: offsetWidth
Свойства offsetParent и offsetWidth
Все элементы блочного уровня сообщают смещения относительно родительского смещения:
- offsetTop
- offsetLeft
- offsetWidth
- offsetHeight
Смещенный родительский элемент — это ближайший предок элемента, имеющий позицию, отличную от статической.
Если смещенный родительский элемент не существует, смещение выполняется относительно тела документа.
Связные страницы offsetWidth
Синтаксис offsetWidth
element.offsetWidth
Возвращаемое значение offsetWidth
| Тип | Описание |
|---|---|
| Number | Видимая ширина элемента (в пикселях), включая отступы, границу и полосу прокрутки. |
Разница между
clientHeight/clientWidth и offsetHeight/offsetWidth
Без полосы прокрутки:
const elmnt = document.getElementById("myDIV");
let text = "";
text += "Высота с отступом: " + elmnt.clientHeight + "px<br>";
text += "Высота с отступом и границей: " + elmnt.offsetHeight + "px<br>";
text += "Ширина с отступом: " + elmnt.clientWidth + "px<br>";
text += "Ширина с отступом и границей: " + elmnt.offsetWidth + "px";
Попробуйте сами »
С полосой прокрутки:
const elmnt = document.getElementById("myDIV");
let text = "";
text += "Высота с отступом: " + elmnt.clientHeight + "px<br>";
text += "Высота с отступом, границей и полосой прокрутки: " + elmnt.offsetHeight + "px<br>";
text += "Ширина с отступом: " + elmnt.clientWidth + "px<br>";
text += "Ширина с отступом, границей и полосой прокрутки: " + elmnt.offsetWidth + "px";
Попробуйте сами »
Поддержка offsetWidth
element.offsetWidth поддерживается во всех браузерах:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Да | Да | Да | Да | Да | Да |