imports collection
Represents a collection of all styleSheet objects that were imported by a styleSheet object.
The objects in the collection are sorted in source code order.
The imports collection contains only the directly imported styleSheet objects.
Use the imports collection on the imported style sheets to get the styleSheet objects imported by them.
- To get the 'top-level' styleSheet objects, use the styleSheets collection.
- If you need all rules in a styleSheet object, use the rules collection.
- To import a style sheet, use the @import at-rule.
Syntax:
Properties that reference the object:
| • | styleSheet.imports |
Possible members:
Properties:
|
Returns an integer that specifies the number of objects in the current collection.
This property is read-only. |
Methods:
| [index] |
Returns an object from the current collection by index.
Parameters:
Return value:
Returns the styleSheet object at the specified position.
|
||||||||||||||
| item (index) |
Returns an object from the current collection by index.
Parameters:
Return value:
Returns the styleSheet object at the specified position.
|
Example HTML code 1:
This example illustrates the use of the imports collection:
|
|
|||||
<head> <style id="myStyle"> @import "red.css"; </style> <script type="text/javascript"> function ChangeRedColor () { 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]; // we know that the rule is a CSSImportRule var importedSheet = rule.styleSheet; } else { // Internet Explorer before version 9 var importedSheet = sheet.imports[0]; } // the first rule in the style sheet var rules = importedSheet.cssRules ? importedSheet.cssRules : importedSheet.rules; var firstRule = rules[0]; // change the color firstRule.style.color = "#00ff00"; } </script> </head> <body> <button onclick="ChangeRedColor ()">Change the color of the '.red' style rule!</button> <br /><br /> <div class="red">red division</div> <div>non-red division</div> <span class="red">red span</span> </body> |
|||||
|
|||||
|
Did you find this example helpful?
|
External links:
User Contributed Comments