mozilla

Revision 88806 of MediaQueryListListener

  • Revision slug: DOM/MediaQueryListListener
  • Revision title: MediaQueryListListener
  • Revision id: 88806
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment 5 words added

Revision Content

{{ draft() }}

A MediaQueryList object maintains a list of media queries on a {{ domxref("document") }}, and handles sending notifications to listeners when the media queries on the document change.

This makes it possible to observe a document to detect when its media queries change, instead of polling the values periodically, if you need to programmatically detect changes to the values of media queries on a document.

Method overview

void handleChange(MediaQueryList mql);

Methods

handleChange()

Called when the media query list's evaluated state changes.

void handleChange(
  MediaQueryList mql
); 
Parameters
mql
The {{ domxref("MediaQueryList") }} for which the evaluated result changed.

Specification

See also

Revision Source

<p>{{ draft() }}</p>
<p>A <code>MediaQueryList</code> object maintains a list of <a href="/En/CSS/Media_queries" title="En/CSS/Media queries">media queries</a> on a {{ domxref("document") }}, and handles sending notifications to listeners when the media queries on the document change.</p>
<p>This makes it possible to observe a document to detect when its media queries change, instead of polling the values periodically, if you need to programmatically detect changes to the values of media queries on a document.</p>
<h2 name="Method_overview">Method overview</h2>
<table class="standard-table"> <tbody> <tr> <td><code>void <a href="/en/DOM/MediaQueryListListener#handleChange()" title="en/DOM/MediaQueryListListener#handleChange()">handleChange</a>(MediaQueryList mql);</code></td> </tr> </tbody>
</table>
<h2>Methods</h2>
<h3>handleChange()</h3>
<p>Called when the media query list's evaluated state changes.</p>
<pre>void handleChange(
  MediaQueryList mql
); 
</pre>
<h6>Parameters</h6>
<dl> <dt><code>mql</code></dt> <dd>The {{ domxref("MediaQueryList") }} for which the evaluated result changed.</dd>
</dl>
<h2>Specification</h2>
<ul> <li><a class=" external" href="http://dev.w3.org/csswg/cssom-view/#the-mediaquerylist-interface" title="http://dev.w3.org/csswg/cssom-view/#the-mediaquerylist-interface">The CSSOM View Module: The MediaQueryList Interface</a></li>
</ul>
<h2>See also</h2>
<ul> <li><a href="/En/CSS/Media_queries" title="En/CSS/Media queries">Media queries</a></li> <li><a href="/en/CSS/Using_media_queries_from_code" title="en/CSS/Using media queries from code">Using media queries from code</a></li> <li>{{ domxref("MediaQueryList") }}</li> <li>{{ domxref("window.matchMedia()") }}</li>
</ul>
Revert to this revision