MediaQueryList: change-Ereignis
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2020 browserübergreifend verfügbar.
Das change-Ereignis der MediaQueryList-Schnittstelle wird ausgelöst, wenn sich der Status der Übereinstimmung mit einer Media Query ändert.
Syntax
Verwenden Sie den Ereignisnamen mit addEventListener():
js
addEventListener("change", (event) => { })
Alternativ können Sie der Event-Handler-Eigenschaft der Schnittstelle einen Wert zuweisen:
js
onchange = (event) => { }
Ereignistyp
Ein MediaQueryListEvent. Erbt von Event.
Beispiel
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.");
}
};
Spezifikationen
| Spezifikation |
|---|
| CSSOM View Module # dom-mediaquerylist-onchange |