MediaQueryList: addListener() メソッド

非推奨: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

addListener() は MediaQueryList インターフェイスの非推奨のメソッドで、メディアクエリー状態の変化に応答して独自のコールバック関数を実行するリスナーを MediaQueryListener に追加します。

古いブラウザーでは、 MediaQueryList はまだ EventTarget を継承していなかったため、このメソッドは EventTarget.addEventListener() の別名として提供されました。対応する必要があるブラウザーで利用できる場合は、 addListener() の代わりに addEventListener() を使用してください。

構文

js
addListener(func)

引数

func

メディアクエリーの状態が変化したときに実行したいコールバック関数を表す関数または関数への参照。

返値

なし (undefined)。

例

js
const paragraph = document.querySelector("p");
const mediaQueryList = window.matchMedia("(max-width: 600px)");

function screenTest(e) {
  if (e.matches) {
    /* the viewport is 600 pixels wide or less */
    paragraph.textContent = "This is a narrow screen — 600px wide or less.";
    document.body.style.backgroundColor = "pink";
  } else {
    /* the viewport is more than 600 pixels wide */
    paragraph.textContent = "This is a wide screen — more than 600px wide.";
    document.body.style.backgroundColor = "aquamarine";
  }
}

mediaQueryList.addListener(screenTest);

仕様書

Specification
CSSOM View Module
# dom-mediaquerylist-addlistener

ブラウザーの互換性

BCD tables only load in the browser

関連情報