ویژگی offsetWidth HTML DOM Element

تعریف و استفاده

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 = ".ابعاد با پادینگ و حاشیه: " + elmnt.offsetHeight + "px<br>";
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
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی