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

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

ownerRule property (styleSheet)

Browser support:

9

Returns a CSSRule object that represents the rule that imported the current style sheet.

Note: The ownerRule property is supported in Internet Explorer from version 9.

If the current stylesheet was imported by an @import style rule, then returns a CSSImportRule object that represents the @import style rule.
If the current stylesheet belongs to a style element, or was imported by a link element, then returns null. In that case, use the ownerNode and owningElement properties to get the owner element.

In older Internet Explorer versions, use the imports collection instead of the ownerRule property.

Syntax:

object.ownerRule;

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

This property is read-only.

Possible values:

Returns a reference to the owner CSSRule object or returns null.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the ownerRule property:

Code

style.css

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

    <script type="text/javascript">
        function GetImportRule () {
            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
                // the @import rule
                var importRule = sheet.cssRules[0];

                // the imported styleSheet object (go down one level)
                var importedSheet = importRule.styleSheet;

                // the @import rule, again (go up one level)
                importRule = importedSheet.ownerRule;
                alert ("The import rule:\n" + importRule.cssText);
            }
            else {  // Internet Explorer before version 9
                    // only the imported style sheet is accessible
                var importedSheet =  sheet.imports[0];
                alert ("The contents of the imported style sheet:\n" + importedSheet.cssText);
            }
        }
    </script> 
</head>
<body>
    <button onclick="GetImportRule ()">Get the import rule with ownerRule!</button>
</body>