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

MediaList - メディアの一覧

MediaListは、スタイルシートに関連付けられたメディアの一覧を管理するための機能を備えたインターフェイスです。

概要

名前
MediaList
IDL
[Exposed=Window,
 LegacyArrayClass]
interface MediaList {
  stringifier attribute [TreatNullAs=EmptyString] CSSOMString mediaText;
  readonly attribute unsigned long length;
  getter CSSOMString? item(unsigned long index);
  void appendMedium(CSSOMString medium);
  void deleteMedium(CSSOMString medium);
};

typedef USVString CSSOMString;
仕様書
https://drafts.csswg.org/cssom/#medialist

チュートリアル

先にStyleSheetStyleSheetCSSStyleSheetを理解して下さい。

media属性

MediaListは、StyleSheet.mediaが返します。これはstyle要素やlink要素のmedia属性の値を反映しています。

<style media="print,screen">
p {
	color: red ;
}
</style>
var styleSheet = document.styleSheets[0] ;	// CSSStyleSheet
styleSheet.media ;	// MediaList

styleSheet.media[0] ;	// "print"
styleSheet.media[1] ;	// "screen"

@mediaのクエリ

また、CSSMediaRule.mediaが返します。これは@mediaのクエリを反映しています。

<style>
@media screen, print {
	p {
		color: red ;
	}
}
</style>
var styleSheet = document.styleSheets[0] ;	// CSSStyleSheet
var cssRule = styleSheet.cssRules[0] ;	// CSSMediaRule
cssRule.media ;	// MediaList

cssRule.media[0] ;	// "screen"
cssRule.media[1] ;	// "print"

コンストラクタ

コンストラクタはありません。

プロパティ

length

メディアの数を返します。

mediaText

メディアの一覧を文字列で返します。

メソッド

appendMedium()

メディアを1つ追加します。

deleteMedium()

メディアを1つ削除します。

item()

インデックス番号を指定してメディアを取得します。

定数

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

イベント

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

サポート状況

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

FeaturesChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
MediaList 9+
appendMedium() 9+
deleteMedium() 9+
item() 9+
length 9+
mediaText 9+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月15日 (日)
コンテンツを公開しました。