StyleSheet.media

The media property of the StyleSheet interface specifies the intended destination media for style information. It is a read-only, array-like MediaList object and can be removed with deleteMedium() and added with appendMedium().

Example

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="document.css" type="text/css" media="screen" />
<style rel="stylesheet" type="text/css" media="screen, print">
body  { background-color: snow; }
</style>
</head>
<body>

<script>
for (var iSheetIndex = 0; iSheetIndex < document.styleSheets.length; iSheetIndex++)
 {
  console.log('document.styleSheets[' + String(iSheetIndex) + '].media: ' +
   JSON.stringify(document.styleSheets[iSheetIndex].media));
  if (iSheetIndex === 0)
    document.styleSheets[iSheetIndex].media.appendMedium('handheld');
  if (iSheetIndex === 1)
    document.styleSheets[iSheetIndex].media.deleteMedium('print');
  console.log('document.styleSheets[' + String(iSheetIndex) + '].media: ' +
   JSON.stringify(document.styleSheets[iSheetIndex].media));
 }
/*
will log:
document.styleSheets[0].media: {"0":"screen"}
document.styleSheets[0].media: {"0":"screen","1":"handheld"}
document.styleSheets[1].media: {"0":"screen","1":"print"}
document.styleSheets[1].media: {"0":"screen"}
*/
</script>

</body>
</html>

Specifications

Specification Status Comment
CSS Object Model (CSSOM)
The definition of 'StyleSheet: media' in that specification.		 Working Draft

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
mediaChrome Full support 1Edge Full support 12Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support
Full support
Compatibility unknown
Compatibility unknown