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.
addEventListener('change', event => { });
onchange = event => { };
Event type
An 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
DOMString
representing a serialized media query.
Example
var 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
No specification found
No specification data found for api.MediaQueryList.change_event
.
Check for problems with this page or contribute a missing spec_url
to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.
Browser compatibility
No compatibility data found for api.MediaQueryList.change_event
.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.