خصوصیت element.offsetWidth
مثال (خصوصیت element.offsetWidth)
به دست آوردن ارتفاع و عرض از یک عنصر <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 و scrollbar و margin نیز می شود.
به این دلیل کلمه ی قابل دید را به کار بردیم که اگر محتوای عنصر، نسبت به عرض واقعی گسترده تر باشد، این خصوصیت تنها، عرض قابل دید را برمی گرداند.
نکته: برای فهمیدن این خصوصیت، باید مفهوم CSS Box Model را فهمیده باشید.
از این خصوصیت اغلب در کنار خصوصیت offsetHeight استفاده می شود.
نکته: می توانید از خصوصیت های clientHeight و clientWidth برای برگرداندن ارتفاع و عرض قابل دید یک عنصر، تنها به همراه padding استفاده کنید.
نکته: برای اضافه کردن اسکرول بارها به یک عنصر، از خصوصیت سی اس اس overflow استفاده کنید.
این خصوصیت، فقط خواندنی است.
پشتیبانی مرورگرها
| متد | |||||
|---|---|---|---|---|---|
| offsetWidth | بله | بله | بله | بله | بله |
نحوه استفاده
جزئیات تکنیکی
| مقدار برگشتی |
یک عدد که مشخص کننده ی عرض قابل دید از یک عنصر به واحد پیکسل می باشدهمچنین padding و border و scrollbar را نیز شامل می شود. |
|---|
مثال - خودتان امتحان کنید
مثال (خصوصیت element.offsetWidth)
یک مثال که تفاوت دستورات 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.offsetWidth)
این مثال تفاوت بین دستورات clientHeight/clientWidth و offsetHeight/offsetWidth را هنگامی که یک اسکرول بار را به عنصر اضافه می کنیم نشان می دهد:
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
- نوشته شده توسط احسان عباسی
- بازدید: 5862
