SYNCERのロゴ
アイキャッチ画像

MediaQueryListEvent - メディアクエリの変化イベント

MediaQueryListEventは、MediaQueryListchangeイベントで取り扱われるインターフェイスです。

概要

名前
MediaQueryListEvent
継承
IDL
[Exposed=Window,
 Constructor(CSSOMString type, optional MediaQueryListEventInit eventInitDict)]
interface MediaQueryListEvent : Event {
  readonly attribute CSSOMString media;
  readonly attribute boolean matches;
};

dictionary MediaQueryListEventInit : EventInit {
  CSSOMString media = "";
  boolean matches = false;
};

typedef USVString CSSOMString;

dictionary EventInit {
  boolean bubbles = false;
  boolean cancelable = false;
  boolean composed = false;
};
仕様書
https://drafts.csswg.org/cssom-view/#mediaquerylistevent

チュートリアル

MediaQueryListEventは、MediaQueryList.addListener()MediaQueryList.onchangeで設定したchangeイベントで、コールバック関数に渡されるオブジェクトです。

var mediaQueryList = matchMedia( "(max-width: 270px)" ) ;

var callbackFn = function ( event ) {
	console.log( event ) ;
}

mediaQueryList.onchange = callbackFn ;
mediaQueryList.addListener( callbackFn ) ;

コンストラクタ

MediaQueryListEvent()

新しいMediaQueryListEventのオブジェクトを作成します。

プロパティ

matches

メディアクエリの条件に一致しているか否かを返します。

media

クエリを返します。

メソッド

固有のメソッドはありません。

定数

固有の定数はありません。

イベント

固有のイベントハンドラはありません。

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

FeaturesChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
MediaQueryListEvent 40+ 55+××× 26+××
matches 40+ 55+××× 26+××
media 40+ 55+××× 26+××
MediaQueryListEvent() 39+ 55+××× 26+××
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月17日 (火)
コンテンツを公開しました。