HTML DOM 元素 offsetWidth

示例

获取 "myDIV" 的高度和宽度，包括内边距和边框：

const elmnt = document.getElementById("myDIV");
let text = "Height with padding and border: " + elmnt.offsetHeight + "px ";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";

亲自试一试 »

下面有更多示例。

描述

这个offsetWidth属性返回元素的可视宽度（以像素为单位），包括填充、边框和滚动条，但不包括边距。

这个offsetWidth属性是只读的。

教程：

CSS 盒子模型

偏移父级

所有块级元素报告相对于偏移父级的偏移量：

顶部偏移
向左偏移
偏移宽度
偏移高度

偏移父级是具有非静态位置的最近祖先。

如果不存在偏移父级，则偏移量是相对于文档正文的。

也可以看看：

语法

element.offsetWidth

返回值

类型	描述
数字	元素的可视宽度（以像素为单位），包括内边距、边框和滚动条。

和...之间的不同
clientHeight/clientWidth 和 offsetHeight/offsetWidth

没有滚动条：

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px ";
text += "Height with padding and border: " + elmnt.offsetHeight + "px ";
text += "Width with padding: " + elmnt.clientWidth + "px ";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";

亲自试一试 »

带滚动条：

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px ";
text += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px ";
text += "Width with padding: " + elmnt.clientWidth + "px ";
text += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";

亲自试一试 »

浏览器支持

element.offsetWidth所有浏览器都支持：


Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes

HTML DOM 元素 offsetWidth

示例

描述

教程：

偏移父级

也可以看看：

语法

返回值

和...之间的不同clientHeight/clientWidth 和 offsetHeight/offsetWidth

浏览器支持

和...之间的不同
clientHeight/clientWidth 和 offsetHeight/offsetWidth