آموزش ویژگی offsetHeight در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی offsetHeight در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی offsetHeight در DOM جاوااسکریپت
با استفاده از ویژگی offsetHeight میتونیم اندازه ارتفاع ( ویژگی Height ) قابل مشاهده ( یا در دسترس ) یک عنصر که شامل مقدار Padding و Border و اسکرول بار ( overflow ) می باشد رو بدست بیاوریم.
و همچنین با استفاده از ویژگی offsetWidth میتونیم اندازه عرض ( ویژگی width ) یک عنصر را که شامل Padding و Border و اسکرول بار می باشد، محاسبه نماییم.
منظور از اسکرول بار یعنی اون قسمتی از عنصر که اسکرول ایجاد میشه ، یعنی اندازه اون قسمت هم محاسبه میشه.
این ویژگی فقط شامل اندازه Padding و Border و اسکرول می باشد، شامل Margin نمی باشد.
| مقدار برگشتی | یک عدد که نشان دهنده اندازه کل ارتفاع یک عنصر بهمراه مقدار Padding و Border و اسکرول بار می باشد |
|---|
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : در مثال زیر هم از ویژگی offsetHeight و هم offsetWidth استفاده شده.
|
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 = "اندازه ارتفاع = " + mybox.offsetHeight + "px" + "<br>" + "اندازه عرض = " + mybox.offsetWidth + "px"; result.innerHTML = mysize; } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
| offsetHeight | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.
|
1 |
Element.offsetHeight; |
Free-Learn
نکات و توضیحات
- ویژگی offsetHeight مقدار اندازه ارتفاع ( Height ) یک عنصر رو بهمراه مقدار ویژگی Padding و Border و اسکرول بار برمیگردونه.
- ویژگی offsetWidth مقدار اندازه عرض ( Width ) یک عنصر رو بهمراه مقدار ویژگی Padding و Border و اسکرول بار برمیگردونه.
- ویژگی clientHeight مقدار اندازه ارتفاع ( Height ) یک عنصر رو بهمراه مقدار فقط ویژگی Padding برمیگردونه.
- ویژگی clientWidth مقدار اندازه عرض ( Width ) یک عنصر رو بهمراه مقدار فقط ویژگی Padding برمیگردونه.
