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

imports collection

Browser support:
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.
In Firefox, Opera, Google Chrome, Safari and Internet Explorer from version 9, the cssRules collection provides access to CSS rules. For further details, please see the page for the cssRules collection and the example below.

Syntax:

Properties that reference the object:
styleSheet.imports

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 current 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 current 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 imports collection:
Code
red.css
<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? yes no

External links:

User Contributed Comments

Post Content

Post Content