You are here: Reference > JavaScript > client-side > style handling > objects > mediaList

mediaList collection

Browser support:
9
Represents a collection of media types defined for an at-rule or a style sheet.
Note: The mediaList object is supported in Internet Explorer from version 9.
Media types are the target devices for style properties. For a complete list of media types, see the page for the media property.
Media types can be specified for the import and media at-rules in CSS, or by the media property for the style and link elements.

Syntax:

Properties that reference the object:
object.media
The base interface, through which you can add new functionalities to the medialist collection, is the MediaList interface.

Possible members:

Properties:
length
Returns an integer that specifies the number of media types in the current collection.

This property is read-only.
mediaText
Retrieves a string that represents the media types contained by the current mediaList collection.
Methods:
[index]
Returns a media type from the current collection by index.

Parameters:

index
Required. Zero-based integer that specifies the position of the media type to retrieve.

Return value:

Returns a string that represents the media type.
appendMedium
Adds a media type to the mediaList collection.
deleteMedium
Removes a media type from the mediaList collection.
item (index)
Returns a media type from the current collection by index.

Parameters:

index
Required. Zero-based integer that specifies the position of the media type to retrieve.

Return value:

Returns a string that represents the media type.

Example HTML code 1:

This example illustrates the use of the medialist collection specified for the media at-rule:
<head>
    <style id="myStyle">
        @media screen, print {
            body {
                font-size: 13px;
                color: #FF0000;
            }
          }
    </style>

    <script type="text/javascript">
        function GetMedia () {
            var styleTag = document.getElementById ("myStyle");

                // the style sheet in the style tag
            var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;

            if (sheet.cssRules) {   // all browsers, except IE before version 9
                var rule = sheet.cssRules[0];
                var mediaList = rule.media;
                alert ("The count of media types that belong to the style rule: " + mediaList.length);
                for (var i = 0; i < mediaList.length; i++) {
                    alert ("The " + (i+1) + ". media type: " + mediaList.item(i));
                }

                alert ("The media types as a string: " + mediaList.mediaText);
            }
            else {      // Internet Explorer before version 9
                    // note: the rules collection does not contain the at-rules
                alert ("Your browser does not support this example!");
            }
        }
    </script>
</head>
<body>
    Sample text<br />
    <button onclick="GetMedia ();">Get media types</button>
</body>
Did you find this example helpful? yes no

Example HTML code 2:

This example shows how to get the media types specified by the media property:
<head>
    <style id="myStyle" media="screen, print">
        body {
            font-size: 13px;
            color: #FF0000;
        }
    </style>
    
    <script type="text/javascript">
        function GetMedia () {
            var styleTag = document.getElementById ("myStyle");

                // the style sheet in the style tag
            var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;
            
            var mediaList = sheet.media;
            
            if (typeof (mediaList) == "string") {   // Internet Explorer before version 9
                alert ("The media types as a string: " + mediaList);
            }
            else {  // all browsers, except Internet Explorer before version 9
                alert ("The count of media types that belong to the style rule: " + mediaList.length);
                for (var i = 0; i < mediaList.length; i++) {
                    alert ("The " + (i+1) + ". media type: " + mediaList.item(i));
                }

                alert ("The media types as a string: " + mediaList.mediaText);
            }
        }
    </script>
</head>
<body>
    Sample text<br />
    <button onclick="GetMedia ();">Get media types</button>
</body>
Did you find this example helpful? yes no

External links:

User Contributed Comments

Post Content

Post Content