Свойство offsetWidth HTML DOM Element

Определение и использование

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

offsetWidth Свойства только для чтения.

См. также:Урок по CSS-фрейму

offsetParent

Все блочные элементы сообщают о смещении относительно смещенного родителя:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

Смещенный родитель指的是 ближайший предок с не_Statics-положением.

Если отсутствует смещенный родитель, смещение относительно текста документа.

См. также:

Свойство offsetHeight

Свойство offsetParent

Свойство offsetTop

Свойство offsetLeft

Свойство clientTop

Свойство clientLeft

Свойство clientWidth

Свойство clientHeight

Пример

Пример 1

Получение высоты и ширины "myDIV", включая отступы и рамку:

const elmnt = document.getElementById("myDIV");
let text = "Высота с отступами и рамкой: " + elmnt.offsetHeight + "px<br>";
text += "Ширина с отступами и рамками: " + elmnt.offsetWidth + "px";

Попробуйте сами

Пример 2

Разница между 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";

Попробуйте сами

Синтаксис

element.offsetWidth

Возвратное значение

Тип Описание
Число Визуальная ширина элемента (в пикселях), включая отступы, рамки и полосы прокрутки.

Поддержка браузеров

Все браузеры поддерживают element.offsetWidth:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка Поддержка