HTMLStyleElement: media property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The HTMLStyleElement.media property specifies the intended destination medium for style information.

Value

A string describing a single medium or a comma-separated list.

Examples

html

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Test page</title>

    <link
      id="LinkedStyle"
      rel="stylesheet"
      href="document.css"
      media="screen" />
    <style id="InlineStyle" rel="stylesheet" media="screen, print">
      p {
        color: blue;
      }
    </style>
  </head>
  <body>
    <script>
      console.log(
        "LinkedStyle: ",
        document.getElementById("LinkedStyle").media,
      ); // 'screen'
      console.log(
        "InlineStyle: ",
        document.getElementById("InlineStyle").media,
      ); // 'screen, print'
    </script>
  </body>
</html>

Specifications

Specification
HTML # dom-style-media

Value

Examples

Specifications

Browser compatibility