Javascript Reference - HTML DOM Link media Property
The media property sets or gets the media type for the link element.
The style might be different for computers and mobile devices.
Browser Support
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
media |
Yes | Yes | Yes | Yes | Yes |
Syntax
Return the media property.
var v = linkObject.media
Set the media property.
linkObject.media=device
Property Values
| Value | Description |
|---|---|
| all | For all devices. This is default |
| aural | For speech synthesizers |
| braille | For Braille tactile feedback devices |
| embossed | For paged Braille printers |
| handheld | For handheld devices |
| For printed pages and print preview | |
| projection | For projectors or transparencies |
| screen | For color computer screens |
| speech | For speech synthesizers |
| tty | For teletype devices |
| tv | For TV-type devices |
Return Value
A String type value representing a comma-separated list of media types.
Example
The following code shows how to Change the media type.
<!DOCTYPE html>
<html>
<head>
<link id="myLink" rel="stylesheet" type="text/css" media="screen" href="styles.css">
</head><!-- ww w . j a va 2s . c o m-->
<body>
<button onclick="myFunction()">test</button>
<script>
function myFunction() {
document.getElementById("myLink").media = "all";
}
</script>
</body>
</html>
The code above is rendered as follows:
Example 2
The following code shows how to get the media type the link element is intended for.
<!DOCTYPE html>
<html>
<head>
<link id="myLink" rel="stylesheet" type="text/css" media="screen" href="styles.css">
</head><!--from w ww. j av a 2 s . c om-->
<body>
<button onclick="myFunction()">test</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myLink").media;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
The code above is rendered as follows: