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.

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

BCD tables only load in the browser