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

media property (styleSheet, link, style)

Browser support:
Specifies or returns the media types for style definition.
Media types are the target devices for style properties. To set a media type for a style, you can use the @media rule as well.

Syntax:

object.media;
You can find the related objects in the Supported by objects section below.
This property is read/write.
HTML page for this property: media

Possible values:

String that sets or retrieves a comma-separated list of media types.
The list of the supported media types:
all
Default. For all media.
aural
Speech synthesizers.
braille
Braille tactile feedback devices.
embossed
Paged braille printers.
handheld
Handheld devices.
print
Printed pages and print preview.
projection
Projectors or print to transparencies.
screen
Color computer screens.
speech
Intended for speech synthesizers.
tty
Teletypes.
tv
Television-type devices.
Default: all.

Example HTML code 1:

This example illustrates the use of the media attribute:
<head>
    <style media="print">
        h1 { text-align: center }
    </style>
</head>
<body>
    <h1>This element will be centered in printed pages and print preview.</h1>
</body>
Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the media property:
<head>
    <style id="styleBlock" media="print">
        h1 { text-align: center }
    </style>
    <script type="text/javascript">
        function ChangeMedia () {
            var style = document.getElementById ("styleBlock");
            style.media = "all";
        }
    </script>
</head>
<body>
    <h1>This element will be centered if you set media to all.</h1>

    <button onclick="ChangeMedia ();">Change media to all!</button>
</body>
Did you find this example helpful? yes no

Example HTML code 3:

This example uses the styleSheets collection to access the media. The media property of the styleSheet object works differently in Internet Explorer before version 9, than in other browsers. Fortunately, the type of the media property in Internet Explorer before version 9 differs from the type of the media property in other browsers. See the page for the media property for details.
<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

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content