MediaQueryList: change イベント
MediaQueryList インターフェイスの change イベントは、メディアクエリーの状態が変化した時に発生します。
構文
addEventListener() 等のメソッドでイベント名を利用するか、イベントハンドラープロパティを設定します。
addEventListener('change', event => { });
onchange = event => { };
イベントタイプ
MediaQueryListEvent (en-US) です。 Event から継承します。
イベントプロパティ
MediaQueryListEvent インタフェースは、親インタフェースである Event からプロパティを継承します。
MediaQueryListEvent.matches読取専用-
Boolean。documentが現在メディアクエリーのリストに一致していればtrueを返し、そうでなければfalseを返します。 MediaQueryListEvent.media読取専用-
DOMStringで、シリアライズされたメディアクエリーを表します。
例
var mql = window.matchMedia('(max-width: 600px)');
mql.onchange = (e) => {
if (e.matches) {
/* ビューポートが 600 ピクセル幅以下 */
console.log('This is a narrow screen — less than 600px wide.')
} else {
/* ビューポートが 600 ピクセル幅より広い */
console.log('This is a wide screen — more than 600px wide.')
}
}
仕様書
| Specification |
|---|
| CSSOM View Module # dom-mediaquerylist-onchange |
ブラウザーの互換性
BCD tables only load in the browser