MediaList

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

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.

Instance properties

MediaList.mediaText

A stringifier that returns a string 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.

Instance 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 string representing a media query as text, given the media query's index value inside the MediaList. This method can also be called using the bracket ([]) syntax.

MediaList.toString()

Returns a string representation of this media list in the same format as the object's MediaList.mediaText property.

Examples

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

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

Specifications

Specification
CSS Object Model (CSSOM)
# the-medialist-interface

Browser compatibility

Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
MediaList
appendMedium
deleteMedium
item
length
mediaText
toString