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
チュートリアル
先にStyleSheet、StyleSheet、CSSStyleSheetを理解して下さい。
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()
インデックス番号を指定してメディアを取得します。
定数
固有の定数はありません。
イベント
固有のイベントハンドラはありません。
サポート状況
クリックすると、バージョンごとの対応状況を確認できます。
Features | Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|---|
MediaList | ● | ● | ● | ● | ● | ● | ● | ● |
appendMedium() | ● | ● | ● | ● | ● | ● | ● | ● |
deleteMedium() | ● | ● | ● | ● | ● | ● | ● | ● |
item() | ● | ● | ● | ● | ● | ● | ● | ● |
length | ● | ● | ● | ● | ● | ● | ● | ● |
mediaText | ● | ● | ● | ● | ● | ● | ● | ● |
関連記事
- CSSMediaRule
- CSSMediaRuleは、@mediaのCSSルールを管理するための機能を備えたインターフェイスです。
- StyleSheet
- StyleSheetは、スタイルシートを管理するための機能を備えたインターフェイスです。
- CSSConditionRule
- CSSConditionRuleは、CSSMediaRuleとCSSSupportsRuleが共通して実装するインターフェイスです。
- CSSImportRule
- CSSImportRuleは、@importのCSSルールを管理するための機能を備えたインターフェイスです。