mediaList collection
| 9 | ||||
Represents a collection of media types defined for an at-rule or a style sheet.
Note: The mediaList object is supported in Internet Explorer from version 9.
Media types are the target devices for style properties. For a complete list of media types, see the page for the media property.
Media types can be specified for the import and media at-rules in CSS, or by the media property for the style and link elements.
Syntax:
Properties that reference the object:
| • | object.media |
Related objects:
|
The base interface, through which you can add new functionalities to the medialist collection, is the MediaList interface.
Possible members:
Properties:
|
Returns an integer that specifies the number of media types in the current collection.
This property is read-only. |
|||||||
| Retrieves a string that represents the media types contained by the current mediaList collection. |
Methods:
| [index] |
Returns a media type from the current collection by index.
Parameters:
Return value:
Returns a string that represents the media type.
|
||||||||||||||
| appendMedium | Adds a media type to the mediaList collection. | ||||||||||||||
| deleteMedium | Removes a media type from the mediaList collection. | ||||||||||||||
| item (index) |
Returns a media type from the current collection by index.
Parameters:
Return value:
Returns a string that represents the media type.
|
Example HTML code 1:
This example illustrates the use of the medialist collection specified for the media at-rule:
|
|
||||
<head> <style id="myStyle"> @media screen, print { body { font-size: 13px; color: #FF0000; } } </style> <script type="text/javascript"> function GetMedia () { var styleTag = document.getElementById ("myStyle"); // the style sheet in the style tag var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet; if (sheet.cssRules) { // all browsers, except IE before version 9 var rule = sheet.cssRules[0]; var mediaList = rule.media; alert ("The count of media types that belong to the style rule: " + mediaList.length); for (var i = 0; i < mediaList.length; i++) { alert ("The " + (i+1) + ". media type: " + mediaList.item(i)); } alert ("The media types as a string: " + mediaList.mediaText); } else { // Internet Explorer before version 9 // note: the rules collection does not contain the at-rules alert ("Your browser does not support this example!"); } } </script> </head> <body> Sample text<br /> <button onclick="GetMedia ();">Get media types</button> </body> |
||||
|
||||
|
Did you find this example helpful?
|
Example HTML code 2:
This example shows how to get the media types specified by the media property:
|
|
||||
<head> <style id="myStyle" media="screen, print"> body { font-size: 13px; color: #FF0000; } </style> <script type="text/javascript"> function GetMedia () { var styleTag = document.getElementById ("myStyle"); // the style sheet in the style tag var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet; var mediaList = sheet.media; if (typeof (mediaList) == "string") { // Internet Explorer before version 9 alert ("The media types as a string: " + mediaList); } else { // all browsers, except Internet Explorer before version 9 alert ("The count of media types that belong to the style rule: " + mediaList.length); for (var i = 0; i < mediaList.length; i++) { alert ("The " + (i+1) + ". media type: " + mediaList.item(i)); } alert ("The media types as a string: " + mediaList.mediaText); } } </script> </head> <body> Sample text<br /> <button onclick="GetMedia ();">Get media types</button> </body> |
||||
|
||||
|
Did you find this example helpful?
|
External links:
User Contributed Comments