MediaList
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 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
MediaListas text, and also allows you to set a newMediaList. MediaList.lengthRead 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.mediaTextproperty.
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
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
MediaList
|
|
|
|
|
|
|
|
|
|
|
|
|
appendMedium
|
|
|
|
|
|
|
|
|
|
|
|
|
deleteMedium
|
|
|
|
|
|
|
|
|
|
|
|
|
item
|
|
|
|
|
|
|
|
|
|
|
|
|
length
|
|
|
|
|
|
|
|
|
|
|
|
|
mediaText
|
|
|
|
|
|
|
|
|
|
|
|
|
toString
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support