مشخصات offsetHeight HTML DOM Element

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

offsetHeight مشخصات ارتفاع قابل مشاهده عنصر را (با واحد پیکسل) بازمی‌گرداند، شامل پدینگ، حاشیه و نوار اسکرول، اما بدون حاشیه خارجی.

offsetHeight مشخصات فقط خواندنی هستند.

لطفاً به: بنگریدآموزش مدل قاب CSS

offsetParent

تمام عناصر بلوکی اندازه‌گیری‌ها را نسبت به پدر متحرک گزارش می‌دهند:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

پدر متحرک به آخرین اجداد با موقعیت غیراستاتیک اشاره دارد.

اگر پدر متحرک وجود ندارد، اندازه‌گیری به سمت متن اصلی مستند است.

لطفاً به: بنگرید

نمایشگر offsetWidth

نمایشگر offsetParent

نمایشگر offsetTop

نمایشگر offsetLeft

نمایشگر clientTop

نمایشگر clientLeft

نمایشگر clientWidth

نمایشگر clientHeight

مثال

مثال 1

ارتفاع و عرض "myDIV" را نمایش می‌دهد، شامل پدینگ و حاشیه:

const elmnt = document.getElementById("myDIV");
let text = "ارتفاع با پدینگ و حاشیه: " + 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.offsetHeight

مقدار بازگشتی

نوع توضیح
عدد ارتفاع قابل مشاهده‌ی عنصر (با واحد پیکسل)، شامل حاشیه‌ها، حاشیه‌ها و نوارهای اسکرول است.

پشتیبانی مرورگر

همه‌ی مرورگرها از آن پشتیبانی می‌کنند element.offsetHeight:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی