آموزش ویژگی innerWidth در BOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی innerWidth در BOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی innerWidth در BOM جاوااسکریپت
با استفاده از ویژگی window.innerWidth میتونیم اندازه عرض ( Width ) پنجره محتوا ( یعنی فقط باکس محتوا و بدون محاسبه نوار ابزار ) مرورگر رو بدست آوریم.
و همچنین با استفاده از ویژگی window.innerHeight میتونیم اندازه ارتفاع ( Height ) پنجره محتوا ( یعنی فقط باکس محتوا و بدون محاسبه نوار ابزار ) مرورگر رو بدست آوریم.
| مقدار برگشتی | برگشت یک عدد که نشان دهنده اندازه عرض پنجره محتوا در مرورگر می باشد * مقدار برگشتی برحسب پیکسل ( PX ) می باشد |
|---|
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : بدست آوردن اندازه عرض و ارتفاع پنجره محتوای موجود در مرورگر
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> function get(){ var MyWidth,MyHeight,result; MyWidth = window.innerWidth; MyHeight = window.innerHeight; result = document.getElementById("Result"); result.innerHTML = "Width : " + MyWidth + "<br>" + "Height : " + MyHeight; } </script> |
مثال شماره ۲ : بدست آوردن اندازه عرض و ارتفاع پنجره محتوا ( اینبار دیگه داخل صفحه مثال آنلاین نیست )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<body style="text-align:center;"> <button onclick="get();">کلیک کنید</button> <p id="Result"></p> <script> function get(){ var MyWidth,MyHeight,result; MyWidth = window.innerWidth; MyHeight = window.innerHeight; result = document.getElementById("Result"); result.innerHTML = "Width : " + MyWidth + "<br>" + "Height : " + MyHeight; } </script> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
| innerWidth | ۴ | ۲ | ۱۰ | ۳٫۱ | ۹ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.
|
1 |
window.innerWidth; |
Free-Learn
نکات و توضیحات
- این ویژگی یک ویژگی فقط خواندنی یا Read-Only می باشد.
- ویژگی outerWidth اندازه کل عرض پنجره مرورگر رو برمیگردونه. ( که شامل نوار ابزار،منو و.. هم میشه )
- ویژگی outerHeight اندازه کل ارتفاع پنجره مرورگر رو برمیگردونه. ( که شامل نوار ابزار،منو و.. هم میشه )
- ویژگی innerWidth اندازه عرض پنجره محتوارو برمیگردونه. ( که شامل نوار ابزار،منو و.. نمیشه )
- ویژگی innerHeight اندازه ارتفاع پنجره محتوارو برمیگردونه. ( که شامل نوار ابزار،منو و.. نمیشه )
