آموزش متد matchMedia در BOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش متد matchMedia در BOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
متد matchMedia در BOM جاوااسکریپت
با استفاده از متد ()window.matchMedia میتونیم Media Query ها را در یک صفحه وب ایجاد و یا تعریف کرد و یا چک کرد.
همونطور که میدونید در زبان CSS ما با استفاده از دستور Media@ میتونیم مشخص کنیم که مثلا اگه اندازه صفحه فلان اندازه بود فلان استایل بروی عناصر اعمال بشه.
حال ما در زبان جاوااسکریپت با استفاده از همین متد ( window.matchMedia ) نیز میتونیم اندازه ( یا Media Query ) صفحه رو کنترل کنیم.
| مقدار برگشتی | برگشت یک رشته Media Query زبان CSS |
|---|
Free-Learn
مثال از این متد
در ادامه میتوانید یک مثال از این متد را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : چک میکنه که اندازه صفحه در چه وضعیتی هست، مثلا اگه بیشتر از ۵۰۰ پیکسل بود پیغام میده که بیشتر از ۵۰۰تاست و اگه کمتر بود باز پیغام میده.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> function check(){ var MyQuery , result; result = document.getElementById("Result"); MyQuery = window.matchMedia("(max-width: 500px)").matches; if( MyQuery == true ){ result.innerHTML = "کمتر از 500 پیکسل است"; }else{ result.innerHTML = "بیشتر از 500 پیکسل است"; } } </script> |
مثال شماره ۲ : تغییر رنگ زمینه صفحه در اندازه های مختلف، مثلا اگه اندازه بیشتر از ۵۰۰ پیکسل بود رنگ زمینه میشه قرمز در غیراینصورت آبی میشه.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script> function check(){ var MyQuery , result; result = document.getElementById("Result"); MyQuery = window.matchMedia("(max-width: 500px)").matches; if( MyQuery == true ){ document.body.style.backgroundColor = "blue"; document.body.style.color = "#fff"; }else{ document.body.style.backgroundColor = "red"; document.body.style.color = "#fff"; } } </script> |
مثال شماره ۳ : استفاده از متد addListener ( برای اینکه نتایج Media Query بصورت درلحظه اجرا بشن )، در مثال های قبلی باید حتما بروی دکمه کلیک میکردیم تا برنامه اجرا میشد، ولی با استفاده از addListener دیگه در لحظه خودش اجرا میشه.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> function MyCheck(MyQuery){ if(MyQuery.matches){ document.body.style.backgroundColor = "yellow"; document.body.style.color = "#000"; }else{ document.body.style.backgroundColor = "green"; document.body.style.color = "#fff"; } } var MyQuery = window.matchMedia("(max-width:700px)"); MyCheck(MyQuery); MyQuery.addListener(MyCheck); </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این متد در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام متد | Chrome | Firefox | Opera | Safari | IE |
| ()matchMedia | بله | بله | ۱۲٫۱ | ۵٫۱ | ۱۰ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این متد در جاوااسکریپت بصورت زیر می باشد.
|
1 |
window.matchMedia( "Media_Query" ); |
- برای مثال اگه اندازه عرض صفحه کمتر از ۵۰۰ پیکسل بود :
|
1 |
var MyQuery = window.matchMedia("(max-width:500px)"); |
- برای مثال اگه اندازه عرض صفحه بیشتر از ۵۰۰ پیکسل بود :
|
1 |
var MyQuery = window.matchMedia("(min-width:500px)"); |
Free-Learn
جدول پارامترها
در جدول زیر میتوانید، پارامترهایی را که میتوان در این متد استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| Media_Query | ضروری – اون پرس جوی رسانه یا Media Query که قراره چک بشه |
Free-Learn
ویژگی ها و متدهای matchMedia
در جدول زیر میتوانید ویژگی ها و متدهایی را که میتوان با این متد استفاده کرد مشاهده نمایید.
| ویژگی | توضیح |
|---|---|
| matches | برای چک کردن وضعیت پرس وجو ( Media Query ) اگه نتیجه درست باشه true میده و اگه غلط باشه false میده |
| media | برگشت یک رشته از Media Query مشخص شده |
| متد | توضیح |
|---|---|
| ()addListener | مشخص کردن یک تابع برای اجرا و دریافت در لحظه نتیجه Media Query ( همانند مثال شماره ۳ ) منسوخ شده |
| ()removeListener | حذف تابعی که توسط addListener مشخص شده باشد منسوخ شده |
Free-Learn
نکات و توضیحات
- با استفاده از دستور Media@ در زبان CSS میتوان Media Query هارو تعریف کرد.
