MediaQueryList: sự kiện change
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.
Sự kiện change của giao diện MediaQueryList được kích hoạt khi trạng thái hỗ trợ media query thay đổi.
Cú pháp
Dùng tên sự kiện trong các phương thức như addEventListener(), hoặc đặt thuộc tính xử lý sự kiện.
js
addEventListener("change", (event) => { })
onchange = (event) => { }
Loại sự kiện
Một MediaQueryListEvent. Kế thừa từ Event.
Thuộc tính sự kiện
Giao diện MediaQueryListEvent kế thừa các thuộc tính từ giao diện cha, Event.
MediaQueryListEvent.matchesRead only-
Một giá trị boolean là
truenếudocumenthiện tại khớp với danh sách media query, hoặcfalsenếu không. MediaQueryListEvent.mediaRead only-
Một chuỗi đại diện cho media query đã được tuần tự hóa.
Ví dụ
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.");
}
};
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| CSSOM View Module # dom-mediaquerylist-onchange |