styleSheets collection
Represents a collection of styleSheet objects in the current document.
The objects in the collection are sorted in source code order.
The styleSheets collection contains all styleSheet objects that belong to style elements and all styleSheet objects that were imported by link elements, but does not contain the styleSheet objects that were imported by @import at-rules.
The styleSheets collection contains all styleSheet objects that belong to style elements and all styleSheet objects that were imported by link elements, but does not contain the styleSheet objects that were imported by @import at-rules.
If you need the styleSheet objects that were imported by a styleSheet object:
- In Firefox, Opera, Google Chrome, Safari and Internet Explorer from version 9, use the cssRules collection to access the rules and at-rules in a styleSheet object.
- In older Internet Explorer versions (and optionally in newer ones as well), use the imports collection. If you need all rules in a styleSheet object, use the rules collection.
Syntax:
Properties that reference the object:
| • | object.styleSheets |
Related objects:
|
The base interface, through which you can add new functionalities to the styleSheets collection, is the StyleSheetList interface.
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 specified collection by index.
Parameters:
Return value:
Returns the styleSheet object at the specified position.
|
||||||||||||||
| item (index) |
Returns an object from the specified 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 styleSheets collection:
|
|
|||||
<head> <style> button { background-color: cyan; border: solid 1px blue; } </style> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript"> function GetStyleSheets () { alert ("There are " + document.styleSheets.length + " style sheets in the document."); for (var i = 0; i < document.styleSheets.length; i++) { var styleSheet = document.styleSheets[i]; var message = ""; if ('cssText' in styleSheet) { // Internet Explorer message = styleSheet.cssText; } else { // Firefox, Opera, Google Chrome and Safari for (var i = 0; i < styleSheet.cssRules.length; i++) { message += styleSheet.cssRules[i].cssText; } } alert ("The contents of the " + i + ". style sheet:\n\n" + message); } } </script> </head> <body> <button onclick="GetStyleSheets ()">Get style sheets!</button> </body> |
|||||
|
|||||
|
Did you find this example helpful?
|
External links:
User Contributed Comments