Media Constraints

In this chapter you will learn:

  1. Media Constraints

Control Media Constraints

You can access those constraints through the property. property returns a MediaList object.

The methods and properties of the MediaList object are described in the following table.

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
lengthReturns the number of media.number
mediaTextReturns the text value of the media attribute.string
<!DOCTYPE HTML> <!--  j ava2  s  .  c o m-->
    <style title="core styles"> 
        p { 
            border: medium double black; 
            background-color: lightgray; 
        #block1 { color: white;} 
    <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} 
    <p id="block1">
        This is a test. 
    <p id="block2"> 
        This is a test. 
    <div id="placeholder"/> 
        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 + 
                newElem.innerHTML += "<tr><td>Media Text:</td><td>" + 
                                     sheets[i].media.mediaText + 
                for (var j =0; j < sheets[i].media.length; j++) { 
                    newElem.innerHTML += "<tr><td>Media " + j+ 
                                         "</td><td>" + 
                                         sheets[i].media.item(j) + 

Click to view the demo

Next chapter...

What you will learn in the next chapter:

  1. How to disable CSS Style in Javascript
Home » Javascript Tutorial » CSS Style Sheet
Media Constraints
Set property