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

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

parentStyleSheet property (rule objects, styleSheet)

Browser support:

Returns the styleSheet object that contains the current CSSRule 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 CSSImportRule 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 id="myStyle">
        .forTest {color:green;}
    </style>

    <script type="text/javascript">
        function TestParentStyleSheet () {
            var styleTag = document.getElementById ("myStyle");

                // the style sheet in the style tag
            var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;
                // the first rule
            var rules = sheet.cssRules ? sheet.cssRules : sheet.rules;
            var firstRule = rules[0];

                // now, firstRule refers to the .forTest rule
            if (firstRule.parentStyleSheet) {
                var parentSheet = firstRule.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 id="myStyle">
        @import url("style.css");
    </style>

    <script type="text/javascript">
        function TestParentStyleSheet () {
            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];
            }

                // 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>