HTML DOM Element offsetWidth 属性

定义和用法

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

offsetWidth 属性是只读的。

请参阅：CSS 框模型教程

offsetParent

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

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

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

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

另请参阅：

offsetHeight 属性

offsetParent 属性

offsetTop 属性

offsetLeft 属性

clientTop 属性

clientLeft 属性

clientWidth 属性

clientHeight 属性

实例

例子 1

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

const elmnt = document.getElementById("myDIV");
let text = "Height with padding and 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
ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ