HTML DOM Element offsetWidth Atribute

Pagsasakop at Paggamit

offsetWidth Ang atribute ay ibibigay ang madaling tawag ng elementong mayroong makikitang lapad (sa pixels), kasama ang padding, border at scrollbar, ngunit hindi kasama ang margin.

offsetWidth Ang atribute ay read-only.

Mga ibang pagkakatuturo:Tuturo sa CSS Box Model

offsetParent

Lahat ng mga bloke na elemento ay nag-uulat ng offset sa kaugnayan ng offset parent:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

Ang offset parent ay ang pinakamalapit na magulang na may hindi static na posisyon.

Kung wala ang offset parent, ang offset ay kahalintulad ng teksto ng dokumento.

Mga ibang pagkakatuturo:

Atributeong offsetHeight

Atributeong offsetParent

Atributeong offsetTop

Atributeong offsetLeft

Atributeong clientTop

Atributeong clientLeft

Atributeong clientWidth

Atributeong clientHeight

Mga Halimbawa

Mga Halimbawa 1

Makakuha ng taas at lapad ng "myDIV", kasama ang padding at border:

const elmnt = document.getElementById("myDIV");
let text = "Tingan ang taas ng padding at border: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";

亲自试一试

例子 2

clientHeight/clientWidth 与 offsetHeight/offsetWidth 的区别

不带滚动条：

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

亲自试一试

带滚动条：

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

亲自试一试

语法

element.offsetWidth

返回值

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

浏览器支持

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

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 支持 支持 支持 支持 支持