MediaQueryList: change 事件

Baseline 已廣泛支援

此功能已成熟,並可在許多裝置和瀏覽器版本上使用。自 2020 年 9 月起,所有瀏覽器均已提供此功能。

當媒體查詢支援的狀態發生變化時,MediaQueryList 介面的 change 事件就會觸發。

語法

在諸如 addEventListener() 之類的方法中使用事件名稱,或設定事件處理程式屬性。

js
addEventListener("change", (event) => { })

onchange = (event) => { }

事件型別

一個 MediaQueryListEvent 物件。繼承自 Event

Event MediaQueryListEvent

事件屬性

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

瀏覽器相容性

另見