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