MediaQueryListEvent
MediaQueryListEvent 物件儲存了有關 MediaQueryList 物件發生變化的資訊——當 change 事件引用的函式被觸發時，該物件作為事件物件可用。
建構函式
MediaQueryListEvent()-
建立一個新的
MediaQueryListEvent例項。
例項屬性
MediaQueryListEvent 介面繼承自其父介面 Event 的屬性。
MediaQueryListEvent.matches只讀-
一個布林值，如果
document當前匹配媒體查詢列表，則為true，否則為false。 MediaQueryListEvent.media只讀-
一個表示序列化媒體查詢的字串。
例項方法
MediaQueryListEvent 介面繼承自其父介面 Event 的方法。
示例
js
const para = document.querySelector("p"); // This is the UI element where to display the text
const mql = window.matchMedia("(width <= 600px)");
mql.addEventListener("change", (event) => {
if (event.matches) {
// The viewport is 600 pixels wide or less
para.textContent = "This is a narrow screen — less than 600px wide.";
document.body.style.backgroundColor = "red";
} else {
// The viewport is more than 600 pixels wide
para.textContent = "This is a wide screen — more than 600px wide.";
document.body.style.backgroundColor = "blue";
}
});
規範
| 規範 |
|---|
| CSSOM 檢視模組 # the-mediaquerylist-interface |
瀏覽器相容性
載入中…