HTML DOM offsetWidth атрибут

Объект элемента HTML DOM

offsetWidthЧтение свойство возвращает ширину элемента в виде целого числа, включая горизонтальный отступ и рамку.

Обычно, offsetWidth элемента CSS ширина в пиках, включая любую рамку, отступ и вертикальную полосу прокрутки (если она есть). Он не включает ширину псевдоэлементов, например:: beforeили:: after.

Чтобы понять этот атрибут, вам необходимо знатьCSS Box Model.

ИспользованиеclientHeightиclientWidthАтрибут возвращает видимую высоту и ширину элемента, включая отступ, но не включая рамку, отступ и полосы прокрутки (если они есть).

Грамматика:

element.offsetWidth

var elem = document.querySelector("div");
var txt = "Высота включая отступ и рамку: " + elem.offsetHeight + "px<br>";
txt += "Ширина включая отступ и рамку: " + elem.offsetWidth + "px";

Совместимость браузеров

Свойство offsetWidth полностью поддерживается всеми браузерами:

Технические детали

Более примеров

Этот пример демонстрирует различие между clientWidth и offsetWidth:

var elem = document.querySelector("div");
var txt = "Ширина включает padding: " + elem.clientWidth + "px<br>";
txt += "Ширина включает padding + border: " + elem.offsetWidth + "px";

См. также

Референтное руководство HTML DOMСвойство offsetHeight

Референтное руководство HTML DOMСвойство offsetLeft

Референтное руководство HTML DOMСвойство offsetTop

Референтное руководство HTML DOMСвойство offsetParent

Объект элемента HTML DOM