ویژگی 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 + "پیکسلی<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:

کروم آئی ای ایج فائر فاکس سافری آپریا
کروم آئی ای ایج فائر فاکس سافری آپریا
پشتیبندی پشتیبندی پشتیبندی پشتیبندی پشتیبندی پشتیبندی