خصوصیت element.offsetHeight
مثال (خصوصیت element.offsetHeight)
به دست آوردن ارتفاع و عرض از یک عنصر <div> که شامل padding و border نیز می شود:
var txt = "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
خروجی txt در کد بالا:
Width with padding and border: 430px
خودتان امتحان کنید »
در انتهای این صفحه، مثال های بیشتری آورده شده است.
تعریف و کاربرد
خصوصیت ()offsetHeight، ارتفاع "قابل دید" یک عنصر را به پیکسل برمی گرداند، که شامل padding و border و scrollbar نیز می شود، اما شامل margin نمی شود.
به این دلیل کلمه ی "قابل دید" را به کار بردیم که اگر محتوای عنصر نسبت به ارتفاع واقعی عنصر بلند تر باشد، این خصوصیت تنها ارتفاع قابل دید را برمی گرداند.
نکته: برای فهمیدن این خصوصیت شما باید CSS Box Model را فهمیده باشید.
نکته: از این خصوصیت اغلب در کنار خصوصیت offsetWidth استفاده می شود.
نکته: می توانید از خصوصیت های clientHeight و clientWidth برای برگرداندن ارتفاع و عرض قابل دید یک عنصر تنها به همراه padding، استفاده کنید.
نکته: برای اضافه کردن اسکرول بارها به یک عنصر، از خصوصیت سی اس اس overflow استفاده کنید.
این خصوصیت فقط خواندنی است.
پشتیبانی مرورگرها
| متد | |||||
|---|---|---|---|---|---|
| offsetHeight | بله | بله | بله | بله | بله |
نحوه استفاده
جزئیات تکنیکی
| مقدار برگشتی |
یک عدد که مشخص کننده ی ارتفاع قابل دید از یک عنصر به واحد پیکسل می باشد. همچنین padding و border و scrollbar را نیز شامل می شود. |
|---|
مثال - خودتان امتحان کنید
مثال (خصوصیت element.offsetHeight)
این مثال تفاوت بین دستورات clientHeight/clientWidth و offsetHeight/offsetWidth را نشان می دهد:
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
خروجی txt در کد بالا:
Height with padding and border: 280px
Width with padding: 420px
Width with padding and border: 430px
خودتان امتحان کنید »
مثال (خصوصیت element.offsetHeight)
این مثال تفاوت بین دستورات clientHeight/clientWidth و offsetHeight/offsetWidth را به هنگام اضافه کردن scrollbar به یک عنصر، نشان می دهد:
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";
خروجی txt در کد بالا:
Height with padding, border and scrollbar: 280px
Width with padding: 399px
Width with padding, border and scrollbar: 430px
خودتان امتحان کنید »
کلیه توابع و خصوصیت های شیء Element در JavaScript
- نوشته شده توسط احسان عباسی
- بازدید: 5164
