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 des MediaQueryList-Interfaces tritt ein, wenn sich der Status der Unterstützung einer Media Query ändert.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder setzen Sie eine Ereignis-Handler-Eigenschaft.
js
addEventListener("change", (event) => { })
onchange = (event) => { }
Ereignistyp
Ein MediaQueryListEvent. Erbt von Event.
Ereigniseigenschaften
Das MediaQueryListEvent-Interface erbt Eigenschaften von seinem Eltern-Interface, Event.
MediaQueryListEvent.matchesSchreibgeschützt-
Ein boolescher Wert, der
trueist, wenn dasdocumentaktuell der Media Query List entspricht, oderfalse, wenn nicht. MediaQueryListEvent.mediaSchreibgeschützt-
Ein String, der eine serialisierte Media Query repräsentiert.
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 |