MediaQueryList: change-Ereignis
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.
Das change-Ereignis der MediaQueryList-Schnittstelle wird ausgelöst, wenn sich der Status der Unterstützung von Media-Queries ä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
Die MediaQueryListEvent-Schnittstelle erbt Eigenschaften von ihrer Elternschnittstelle, Event.
MediaQueryListEvent.matchesSchreibgeschützt-
Ein boolescher Wert, der
trueist, wenn dasdocumentderzeit mit der Media-Query-Liste übereinstimmt, oderfalse, wenn nicht. MediaQueryListEvent.mediaSchreibgeschützt-
Ein String, der eine serialisierte Media-Query darstellt.
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
| Specification |
|---|
| CSSOM View Module # dom-mediaquerylist-onchange |
Browser-Kompatibilität
Loading…