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