MediaQueryList.onchange - matchesの値が変化した時に発火するイベント
onchangeは、MediaQueryListのイベントです。matchesの値が変化した時にchangeイベントが発生し、ここに設定したコールバック関数が呼び出されます。
概要
- 名前
- onchange
- 所属
- MediaQueryList
- イベント
- change
- IDL
attribute EventHandler onchange; typedef EventHandlerNonNull? EventHandler; callback EventHandlerNonNull = any (Event event);
- 仕様書
- https://drafts.csswg.org/cssom-view/#dom-mediaquerylist-onchange
チュートリアル
onchangeでイベントを設定する例です。
var mediaQueryList = new MediaQueryList( "(max-width: 270px)" ) ;
mediaQueryList.onchange = function ( event ) {
console.log( event ) ;
}
Event.addEventListener()でも、同様にイベントを設定できます。
mediaQueryList.addEventListener( "change", function ( event ) {
console.log( event ) ;
} ) ;
デモ
MediaQueryList.onchangeのデモです。"(max-width: 270px)"というメディアクエリのMediaQueryListを作成しています。ウィンドウの横幅270pxを境に、matchesの値が変化します。その度にイベントが発生します。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<head>
<style>
body { word-break: break-all ; tab-size: 2 ; }
div#result { white-space: pre-wrap ; }
</style>
</head>
<body>
<div id="result"></div>
<script>
var mediaQueryList = matchMedia( "(max-width: 270px)" ) ;
mediaQueryList.onchange = getMediaQueryListInfo ;
function getMediaQueryListInfo() {
document.getElementById( "result" ).textContent = "" ;
appendText( mediaQueryList + "\n" ) ;
appendText( "media: " + mediaQueryList.media + "\n" ) ;
appendText( "matches: " + mediaQueryList.matches + "\n\n" ) ;
if ( mediaQueryList.matches ) {
appendText( "メディアクエリの条件を満たしています。" ) ;
document.body.style.backgroundColor = "#fee" ;
} else {
appendText( "メディアクエリの条件を満たしていません。" ) ;
document.body.style.backgroundColor = "#eef" ;
}
}
function appendText ( text ) {
document.getElementById( "result" ).appendChild( document.createTextNode( text ) ) ;
}
</script>
</body>
</html>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● 39+ | ● 55+ | × | × | × | ● 26+ | × | × |
関連記事
- MediaQueryList.addListener()
- addListener()は、MediaQueryListのメソッドです。changeイベントを追加します。
- MediaQueryList
- MediaQueryListは、メディアクエリを管理するための機能を備えたインターフェイスです。
- Window.matchMedia()
- matchMedia()は、Windowのメソッドです。MediaQueryListを作成します。
- MediaQueryList.media
- mediaは、MediaQueryListのプロパティです。クエリを返します。