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