این آموزش در تاریخ ۱۴۰۱/۰۵/۰۳ آپدیت شده است.
آموزش ویژگی clientHeight در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی clientHeight در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی clientHeight در DOM جاوااسکریپت
با استفاده از ویژگی clientHeight میتونیم اندازه ارتفاع ( Height ) قابل مشاهده ( یا در دسترس ) یک تگ رو بهمراه مقدار Padding از سمت بالا و پایین بدست بیاوریم.
یعنی در یه کلام خروجی که به ما میده بصورت زیر محاسبه میشه :
- مقدار کل ارتفاع = مقدار padding از سمت بالا + مقدار padding از سمت پایین + مقدار height
| مقدار برگشتی | یک عدد که نشان دهنده اندازه کل ارتفاع یک تگ بهمراه مقدار Padding سمت بالا و پایین می باشد |
|---|
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : در مثال زیر هم از ویژگی clientHeight و هم clientWidth استفاده شده
- clientHeight برای بدست آوردن اندازه ارتفاع تگ + Padding های سمت بالا و پایین
- clientWidth برای بدست آوردن اندازه عرض تگ + Padding های سمت راست و چپ
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> function Get_Size() { var MyBox , Result , MySize; MyBox = document.getElementById("MyDiv"); Result = document.getElementById("Result"); MySize = "Height + Padding-Top + Padding-Bottom = " + MyBox.clientHeight + "px" + "<br>" + "Width + Padding-Right + Padding-Left = " + MyBox.clientWidth + "px"; Result.innerHTML = MySize; } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| clientHeight | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.
|
1 |
Element.clientHeight; |
Free-Learn
نکات و توضیحات
- ویژگی clientHeight مقدار اندازه ارتفاع تگ رو بهمراه مقدار ویژگی Padding سمت بالا و پایین برمیگردونه.
- ویژگی clientWidth مقدار اندازه عرض تگ رو بهمراه مقدار ویژگی Padding سمت راست و چپ برمیگردونه.
