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 newMediaList
. 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.
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