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 の定義
草案 初期定義。

ブラウザーの実装状況

現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。 この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。 手助けしていただける場合は、こちらから!

機能 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,