HTML DOM Element offsetWidth 属性

定义和用法

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

offsetWidth 属性是只读的。

请参阅：CSS 框模型教程

offsetParent

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

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

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

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

另请参阅：

offsetHeight 属性

offsetParent 属性

offsetTop 属性

offsetLeft 属性

clientTop 属性

clientLeft 属性

clientWidth 属性

clientHeight 属性

实例

例子 1

获取 \

const elmnt = document.getElementById("myDIV");
let text = \
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
الدعم الدعم الدعم الدعم الدعم الدعم