خصوصیت element.clientWidth
مثال (خصوصیت element.clientWidth)
به دست آوردن ارتفاع و عرض از یک عنصر <div> که شامل padding نیز می باشد:
var txt = "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px";
خروجی txt در کد بالا:
Width with padding: 420px
خودتان امتحان کنید »
در انتهای این صفحه، مثال های بیشتری آورده شده است.
تعریف و کاربرد
خصوصیت clientHeight ارتفاع قابل دید از یک عنصر را به واحد پیکسل برمی گرداند، که شامل padding نیز می باشد اما شامل border و scrollbar و margin نمی باشد.
دلیل اینکه از کلمه ی "قابل دید"(viewable) استفاده شده است، این است که اگر عرض محتوای عنصر از عرض واقعی عنصر بیشتر باشد، این خصوصیت تنها، عرض قابل رویت را برمی گرداند.
نکته: برای فهمیدن این خصوصیت شما باید ابتدا مقاله ی CSS Box Model را مطالعه نمایید.
نکته: از این خصوصیت اغلب در کنار خصوصیت clientHeight استفاده می شود.
نکته: برای برگرداندن عرض و ارتفاع قابل دید از یک عنصر، که شامل padding و border و scrollbar باشد می توانید از خصوصیت های offsetHeight و offsetWidth استفاده کنید.
نکته: برای اضافه کردن اسکرول بارها به یک عنصر می توانید از خصوصیت سی اس اس overflow استفاده کنید.
نکته: این خصوصیت فقط خواندنی می باشد.
پشتیبانی مرورگرها
| متد | |||||
|---|---|---|---|---|---|
| clientWidth | بله | بله | بله | بله | بله |
نحوه استفاده
جزئیات تکنیکی
| مقدار برگشتی |
یک عدد که مشخص کننده ی عرض قابل دید از یک عنصر در واحد پیکسل می باشد و شامل padding نیز می باشد. |
|---|
مثال - خودتان امتحان کنید
مثال (خصوصیت element.clientWidth)
مثال زیر تفاوت بین 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.clientWidth)
این مثال تفاوت بین 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
- نوشته شده توسط احسان عباسی
- بازدید: 4886
