آموزش ویژگی scrollHeight در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی scrollHeight در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی scrollHeight در DOM جاوااسکریپت
با استفاده از ویژگی scrollHeight میتونیم اندازه کل ارتفاع ( ویژگی Height ) یک عنصر رو که شامل مقدار Padding می باشد رو بدست آوریم، و همچنین با استفاده از ویژگی scrollWidth میتونیم اندازه کل عرض ( ویژگی width ) یک عنصر را که شامل Padding می باشد، محاسبه نماییم.
- نحوه محاسبه اندازه عرض عنصر برای scrollWidth :
Padding-Left + Padding-Right + Width = scrollWidth
- نحوه محاسبه اندازه ارتفاع عنصر برای scrollHeight :
Padding-Top + Padding-Bottom + Height = scrollHeight
| مقدار برگشتی | یک عدد که نشان دهنده اندازه کل ارتفاع یک عنصر بهمراه مقدار Padding می باشد |
|---|
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : در مثال زیر هم از ویژگی scrollWidth و هم scrollHeight استفاده شده ( برای بدست آوردن اندازه عرض و ارتفاع یک عنصر که شامل مقدار ویژگی Padding می باشد )
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> function get(){ var my_content, swidth, sheight, result; my_content = document.getElementById("MyContent"); swidth = my_content.scrollWidth; sheight = my_content.scrollHeight; result = document.getElementById("Result"); result.innerHTML = "Width = " + swidth + "px" + "<br>" + "Height = " + sheight + "px"; } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
| scrollHeight | بله | ۲۱ | ۱۰ | ۳٫۱ | ۸ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.
|
1 |
Element.scrollHeight; |
Free-Learn
نکات و توضیحات
- این ویژگی یک ویژگی فقط خواندنی یا Read-Only می باشد.
- این ویژگی فقط شامل اندازه Padding از سمت بالا و پایین ( برای scrollHeight ) و راست و چپ ( برای scrollWidth ) می باشد، و شامل ویژگی Margin یا ویژگی Border نمی باشد.
- ویژگی scrollHeight مقدار اندازه ارتفاع ( Height ) یک عنصر رو بهمراه فقط مقدار ویژگی Padding برمیگردونه.
- ویژگی scrollWidth مقدار اندازه عرض ( Width ) یک عنصر رو بهمراه فقط مقدار ویژگی Padding برمیگردونه.
- ویژگی offsetHeight مقدار اندازه ارتفاع ( Height ) یک عنصر رو بهمراه مقدار ویژگی Padding و Border و اسکرول بار برمیگردونه.
- ویژگی offsetWidth مقدار اندازه عرض ( Width ) یک عنصر رو بهمراه مقدار ویژگی Padding و Border و اسکرول بار برمیگردونه.
