You are here: Reference > JavaScript > client-side > style handling > objects > styleSheets

styleSheets collection

Browser support:
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.
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:
length
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:

index
Required. Zero-based integer that specifies the position of the object to retrieve.

Return value:

Returns the styleSheet object at the specified position.
item (index)
Returns an object from the specified collection by index.

Parameters:

index
Required. Zero-based integer that specifies the position of the object to retrieve.

Return value:

Returns the styleSheet object at the specified position.

Example HTML code 1:

This example illustrates the use of the styleSheets collection:
Code
style.css
<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? yes no

External links:

User Contributed Comments

Post Content

Post Content