語法
在諸如 addEventListener() 之類的方法中使用事件名稱,或設定事件處理程式屬性。
js
addEventListener("change", (event) => { })
onchange = (event) => { }
事件型別
一個 MediaQueryListEvent 物件。繼承自 Event。
事件屬性
MediaQueryListEvent 介面繼承自其父介面 Event 的屬性。
MediaQueryListEvent.matches只讀-
一個布林值,如果
document當前匹配媒體查詢列表,則為true,否則為false。 MediaQueryListEvent.media只讀-
一個表示序列化媒體查詢的字串。
示例
js
const mql = window.matchMedia("(width <= 600px)");
mql.onchange = (e) => {
if (e.matches) {
/* the viewport is 600 pixels wide or less */
console.log("This is a narrow screen — less than 600px wide.");
} else {
/* the viewport is more than 600 pixels wide */
console.log("This is a wide screen — more than 600px wide.");
}
};
規範
| 規範 |
|---|
| CSSOM 檢視模組 # dom-mediaquerylist-onchange |
瀏覽器相容性
載入中…