Media Constraints
In this chapter you will learn:
Control Media Constraints
You can access those constraints through the CSSStyleSheet.media property. CSSStyleSheet.media property returns a MediaList object.
The methods and properties of the MediaList object are described in the following table.
| Member | Description | Returns |
|---|---|---|
| appendMedium(medium) | Adds a new medium to the list. | void |
| deleteMedium(medium) | Removes a medium from the list. | void |
| item(pos) | Returns the media at the specified index. | string |
| length | Returns the number of media. | number |
| mediaText | Returns the text value of the media attribute. | string |
<!DOCTYPE HTML> <!-- j ava2 s . c o m-->
<html>
<head>
<style title="core styles">
p {
border: medium double black;
background-color: lightgray;
}
#block1 { color: white;}
</style>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<style media="screen AND (min-width:500px), PRINT" type="text/css">
#block2 {color:yellow; font-style:italic}
</style>
</head>
<body>
<p id="block1">
This is a test.
</p>
<p id="block2">
This is a test.
</p>
<div id="placeholder"/>
<script>
var placeholder = document.getElementById("placeholder");
var sheets = document.styleSheets;
for (var i = 0; i < sheets.length; i++) {
if (sheets[i].media.length > 0) {
var newElem = document.createElement("table");
newElem.setAttribute("border", "1");
newElem.innerHTML += "<tr><td>Media Count:</td><td>" +
sheets[i].media.length +
"</td></tr>";
newElem.innerHTML += "<tr><td>Media Text:</td><td>" +
sheets[i].media.mediaText +
"</td></tr>";
for (var j =0; j < sheets[i].media.length; j++) {
newElem.innerHTML += "<tr><td>Media " + j+
"</td><td>" +
sheets[i].media.item(j) +
"</td></tr>";
}
placeholder.appendChild(newElem);
}
}
</script>
</body>
</html>
Next chapter...
What you will learn in the next chapter:
Home » Javascript Tutorial » CSS Style Sheet