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

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.

Printed pages and print preview.

projection

Projectors or print to transparencies.

screen

Color computer screens.

speech

Intended for speech synthesizers.

tty

Teletypes.

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>

Copy Code

Preview

Syntax Highlighter

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>

Copy Code

Preview

Syntax Highlighter

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>