MediaList

The MediaList interface represents the media queries of a stylesheet, e.g. those set using a <link> element's media attribute.

Note: MediaList is a live list; updating the list using properties or methods listed below will immediately update the behavior of the document.

Properties

MediaList.mediaText

A stringifier that returns a DOMString representing the MediaList as text, and also allows you to set a new MediaList.

MediaList.length Read only

Returns the number of media queries in the MediaList.

Methods

MediaList.appendMedium()

Adds a media query to the MediaList.

MediaList.deleteMedium()

Removes a media query from the MediaList.

MediaList.item()

A getter that returns a CSSOMString representing a media query as text, given the media query's index value inside the MediaList.

Examples

The following would log to the console a textual representation of the MediaList of the first stylesheet applied to the current document.

const stylesheets = document.styleSheets;
let stylesheet = stylesheets[0];
console.log(stylesheet.media.mediaText);

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
MediaList
1
12
1
9
≤12.1
1
1
18
4
≤12.1
1
1.0
appendMedium
1
12
1
9
≤12.1
1
1
18
4
≤12.1
1
1.0
deleteMedium
1
12
1
9
≤12.1
1
1
18
4
≤12.1
1
1.0
item
1
12
1
9
≤12.1
1
1
18
4
≤12.1
1
1.0
length
1
12
1
9
≤12.1
1
1
18
4
≤12.1
1
1.0
mediaText
1
12
1
9
≤12.1
1
1
18
4
≤12.1
1
1.0

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/MediaList