In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > styleSheet (CSSImportRule)

styleSheet property (CSSImportRule)

Browser support:

9

Returns the styleSheet object that is associated with the style file included by an @import at-rule.

This property only exists for the CSSImportRule object. With the styleSheet object, you can access the rules and at-rules in the style sheet. For further details, please see the page for the styleSheet object.

Syntax:

object.styleSheet;

You can find the related objects in the Supported by objects section below.

This property is read-only.

Possible values:

Returns the styleSheet object belongs to the style file.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the styleSheet property:

Code

style.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>