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

parentStyleSheet property (rule, styleSheet)

A A

Font size

Browser support:

Returns the styleSheet object that contains the current rule object or imports the current styleSheet object.

Style sheets contain style rules and every style rule is contained by a style sheet. In case of style rules, the parentStyleSheet property gets the container styleSheet object. In case of style sheets, if the current style sheet was imported by an @import style rule, then it returns a styleSheet object that contains the @import style rule. If the current stylesheet belongs to a style element, or was imported by a link element, then it returns null.

If the current style sheet was imported by an @import style rule and you need a rule object that represents the @import rule, use the ownerRule property. If the current stylesheet belongs to a style element, or was imported by a link element, then use the ownerNode and owningElement properties to get the owner element.

Syntax:

object.parentStyleSheet;

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

This property is read-only.

Possible values:

Returns the parent styleSheet object or null if it does not exist.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the parentStyleSheet property for style rules:

<head>
    <style>
        .forTest {color:green;}
    </style>

    <script>
        function TestParentStyleSheet () {
                // the first styleSheet in the document (<style> tag)
            var styleSheet = document.styleSheets[0];

            if (styleSheet.cssRules) {
                    // Firefox, Opera and Safari
                var rule = styleSheet.cssRules[0];
            }
            else {
                    // Internet Explorer
                var rule = styleSheet.rules[0];
            }

                // now, the rule variable refers to the @import rule
            if (rule.parentStyleSheet) {
                var parentSheet = rule.parentStyleSheet;
                alert ("The contents of the styleSheet that contain the rule:\n" + parentSheet.ownerNode.innerHTML);
            }
            else {
                alert ("Your browser does not support the parentStyleSheet property for style rules!");
            }
        }
    </script> 
</head>
<body>
    <button onclick="TestParentStyleSheet ()">Test parentStyleSheet!</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the parentStyleSheet property for style sheets:

Code

style.css

<head>
    <style>
        @import url("style.css");
    </style>

    <script>
        function TestParentStyleSheet () {
                // the first styleSheet in the document (<style> tag)
            var styleSheet = document.styleSheets[0];

            if (styleSheet.imports) {
                    // Internet Explorer
                var importedSheet = styleSheet.imports[0];
            }
            else {
                    // Firefox, Opera and Safari
                var rule = styleSheet.cssRules[0];
                var importedSheet = rule.styleSheet;
            }

                // now, the importedSheet variable refers to content of the imported style.css file
            if (importedSheet.parentStyleSheet) {
                var parentSheet = importedSheet.parentStyleSheet;
                if (parentSheet.cssText) {
                    alert ("The contents of the styleSheet that import the style.css file:\n\n" + parentSheet.cssText);
                }
                else {
                    if (parentSheet.ownerNode) {
                        alert ("The contents of the styleSheet that import the style.css file:\n" + parentSheet.ownerNode.innerHTML);
                    }
                    else {
                        alert ("The type of parentStyleSheet: " + typeof (parentSheet));
                    }
                }
            }
            else {
                alert ("Your browser does not support the parentStyleSheet property for style sheets!");
            }
        }
    </script> 
</head>
<body>
    <button onclick="TestParentStyleSheet ()">Test parentStyleSheet!</button>
</body>