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