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