MediaQueryList: change イベント
MediaQueryList インターフェイスの change イベントは、メディアクエリーの状態が変化した時に発生します。
構文
addEventListener() 等のメソッドでイベント名を利用するか、イベントハンドラープロパティを設定します。
js
addEventListener("change", (event) => {});
onchange = (event) => {};
イベントタイプ
MediaQueryListEvent (en-US) です。 Event から継承します。
イベントプロパティ
MediaQueryListEvent インタフェースは、親インタフェースである Event からプロパティを継承します。
MediaQueryListEvent.matches読取専用-
Boolean。documentが現在メディアクエリーのリストに一致していればtrueを返し、そうでなければfalseを返します。 MediaQueryListEvent.media読取専用-
DOMStringで、シリアライズされたメディアクエリーを表します。
例
js
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