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.
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 |
4.4 |
18 |
4 |
≤12.1 |
1 |
1.0 |
appendMedium |
1 |
12 |
1 |
9 |
≤12.1 |
1 |
4.4 |
18 |
4 |
≤12.1 |
1 |
1.0 |
deleteMedium |
1 |
12 |
1 |
9 |
≤12.1 |
1 |
4.4 |
18 |
4 |
≤12.1 |
1 |
1.0 |
item |
1 |
12 |
1 |
9 |
≤12.1 |
1 |
4.4 |
18 |
4 |
≤12.1 |
1 |
1.0 |
length |
1 |
12 |
1 |
9 |
≤12.1 |
1 |
4.4 |
18 |
4 |
≤12.1 |
1 |
1.0 |
mediaText |
1 |
12 |
1 |
9 |
≤12.1 |
1 |
4.4 |
18 |
4 |
≤12.1 |
1 |
1.0 |
toString |
1 |
12 |
1 |
No |
≤12.1 |
≤4 |
4.4 |
18 |
4 |
≤12.1 |
≤3.2 |
1.0 |