خصوصیت element.offsetHeight

مثال (خصوصیت element.offsetHeight)

به دست آوردن ارتفاع و عرض از یک عنصر <div> که شامل padding و border نیز می شود:

var elmnt = document.getElementById("myDIV");
var txt = "Height with padding and border: " + elmnt.offsetHeight + "px ";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";

خروجی txt در کد بالا:

Height with padding and border: 280px
Width with padding and border: 430px

خودتان امتحان کنید »

در انتهای این صفحه، مثال های بیشتری آورده شده است.

تعریف و کاربرد

خصوصیت ()offsetHeight، ارتفاع "قابل دید" یک عنصر را به پیکسل برمی گرداند، که شامل padding و border و scrollbar نیز می شود، اما شامل margin نمی شود.

به این دلیل کلمه ی "قابل دید" را به کار بردیم که اگر محتوای عنصر نسبت به ارتفاع واقعی عنصر بلند تر باشد، این خصوصیت تنها ارتفاع قابل دید را برمی گرداند.

نکته: برای فهمیدن این خصوصیت شما باید CSS Box Model را فهمیده باشید.

نکته: از این خصوصیت اغلب در کنار خصوصیت offsetWidth استفاده می شود.

نکته: می توانید از خصوصیت های clientHeight و clientWidth برای برگرداندن ارتفاع و عرض قابل دید یک عنصر تنها به همراه padding، استفاده کنید.

نکته: برای اضافه کردن اسکرول بارها به یک عنصر، از خصوصیت سی اس اس overflow استفاده کنید.

این خصوصیت فقط خواندنی است.

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

متد
offsetHeight	بله	بله	بله	بله	بله

نحوه استفاده

element.offsetHeight

جزئیات تکنیکی

مقدار برگشتی	یک عدد که مشخص کننده ی ارتفاع قابل دید از یک عنصر به واحد پیکسل می باشد. همچنین padding و border و scrollbar را نیز شامل می شود.

مثال - خودتان امتحان کنید

مثال (خصوصیت element.offsetHeight)

این مثال تفاوت بین دستورات clientHeight/clientWidth و offsetHeight/offsetWidth را نشان می دهد:

var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px ";
txt += "Height with padding and border: " + elmnt.offsetHeight + "px ";
txt += "Width with padding: " + elmnt.clientWidth + "px ";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";

خروجی txt در کد بالا:

Height with padding: 270px
Height with padding and border: 280px
Width with padding: 420px
Width with padding and border: 430px

خودتان امتحان کنید »

مثال (خصوصیت element.offsetHeight)

این مثال تفاوت بین دستورات clientHeight/clientWidth و offsetHeight/offsetWidth را به هنگام اضافه کردن scrollbar به یک عنصر، نشان می دهد:

var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px ";
txt += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px ";
txt += "Width with padding: " + elmnt.clientWidth + "px ";
txt += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";

خروجی txt در کد بالا:

Height with padding: 249px
Height with padding, border and scrollbar: 280px
Width with padding: 399px
Width with padding, border and scrollbar: 430px

خودتان امتحان کنید »

HTMLکلیه توابع و خصوصیت های شیء Element در JavaScript Reference کلیه توابع و خصوصیت های شیء Element در JavaScript

: نوشته شده توسط احسان عباسی; بازدید: 4961

برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.

مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی