MediaQueryList: change event
The change
event of the MediaQueryList
interface fires when the status of media query support changes.
Syntax
Use the event name in methods like addEventListener()
, or set an event handler property.
js
addEventListener("change", (event) => {});
onchange = (event) => {};
Event type
A MediaQueryListEvent
. Inherits from Event
.
Event properties
The MediaQueryListEvent
interface inherits properties from its parent interface, Event
.
MediaQueryListEvent.matches
Read only-
A boolean value that is
true
if thedocument
currently matches the media query list, orfalse
if not. MediaQueryListEvent.media
Read only-
A string representing a serialized media query.
Example
js
const mql = window.matchMedia("(max-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.");
}
};
Specifications
Specification |
---|
CSSOM View Module # dom-mediaquerylist-onchange |
Browser compatibility
BCD tables only load in the browser