MediaQueryList.onchange

MediaQueryList インターフェイスの onchange プロパティは、メディアクエリーのサポート状態が変更された時など、change イベントの発火時に呼び出される関数を表すイベントハンドラープロパティです。イベントオブジェクトは MediaQueryListEvent ですが、これは古いブラウザーでは後方互換性を保つために MediaListQuery インスタンスとして認識されます。

構文

MediaQueryList.onchange = function() { ... };

var para = document.querySelector('p');

var mql = window.matchMedia('(max-width: 600px)');

mql.onchange = function(e) {
  if (e.matches) {
    /* ビューポートの幅が 600px かそれより狭い */
    para.textContent = 'This is a narrow screen — less than 600px wide.';
    document.body.style.backgroundColor = 'red';
  } else {
    /* ビューポートの幅が 600px より広い */
    para.textContent = 'This is a wide screen — more than 600px wide.';
    document.body.style.backgroundColor = 'blue';
  }
}

仕様

仕様書 策定状況 備考
CSS Object Model (CSSOM) View Module
onchange の定義
草案 初期定義。

ブラウザーの実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本サポート (有) ? 55 (55) 未サポート (有) ?
機能 Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
基本サポート 未サポート ? 55.0 (55) 未サポート (有) ? (有)

関連情報

ドキュメントのタグと貢献者

このページの貢献者: Marsf
最終更新者: Marsf,