In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > media (CSSImportRule, CSSMediaRule, styleSheet)

media property (CSSImportRule, CSSMediaRule, styleSheet)

Browser support:

9

Returns the list of media types defined for a specific style rule or a styleSheet object.

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 by import and media at-rules in CSS, or by the media property of the style or link object.

The media property of the styleSheet object also exists in Internet Explorer before version 9, but its type is String, not mediaList like in other browsers. For details, see Example 2 or the page for the media property.

Syntax:

object.media;

You can find the related objects in the Supported by objects section below.

This property is read-only.

Possible values:

If media types are associated with the current object, it returns a mediaList collection filled with the specified media types, else it returns undefined.

Default: this property has no default value.

Example HTML code 1:

This example shows how to get the media types 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>

Copy Code

Preview

Syntax Highlighter

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>