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

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

styleSheet object

Browser support:

Represents a CSS style sheet that belongs to a style element or an imported style file.

Style files can be imported by a link element or with the import style rule.
With styleSheet objects you can access rules and at-rules, modify the contents of style sheets and navigate through the style sheet hierarchy.

Syntax:

Properties that reference the object:

+	object.parentStyleSheet
	Related objects: CSSCharsetRule, CSSFontFaceRule, CSSImportRule, CSSMediaRule, CSSPageRule, CSSRule, CSSStyleRule, rule
+	object.sheet
	Related HTML objects: link, style
+	object.styleSheet
	Related HTML objects: link, style
•	CSSImportRule.styleSheet

Methods that return the object:

•	styleSheets.item (index)
•	imports.item (index)

The base interface, through which you can add new functionalities to the styleSheet object, is the CSSStyleSheet interface.

Possible members:

Properties

Methods

cssRules

9

Represents a collection of CSS rules in a styleSheet or media rule.

cssText

Sets or retrieves the contents of a style declaration as a string.

disabled

Sets or retrieves a Boolean value that indicates the interaction privileges of the current styleSheet object.

href

Sets or returns the URL of a linked style sheet.

Sets or retrieves a unique identifier for the object.

imports

Represents a collection of all styleSheet objects that were imported by a styleSheet object.

media


9

Specifies or returns the media types for style definition.

media

9

Returns the list of media types defined for a specific style rule or a styleSheet object.

ownerNode

9

Returns a reference to the element that contains the current styleSheet object.

ownerRule

9

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

owningElement

Returns a reference to the element that contains the current styleSheet object.

pages

Represents a collection of all @page at-rules in a styleSheet object.

parentStyleSheet

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

readOnly

Returns a Boolean value that indicates whether the current style sheet or rule is imported or not.

rules

Represents a collection of style rules in a styleSheet.

title

Sets or returns the title of the current styleSheet.

type

Retrieves a string value that identifies the language (MIME type) in which the styleSheet is written.

Example HTML code 1:

This example shows how to change a style rule in an embedded style sheet:

<head>
    <style id="myStyle">
        .red {
            color: red;
        }
    </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;
            
                // the first rule in the style sheet
            var rules = sheet.cssRules ? sheet.cssRules : sheet.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>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example shows how to change a style rule in an external style sheet:

Code

red.css

<head>
    <link id="myLink" rel="stylesheet" type="text/css" href="red.css" />
    <script type="text/javascript">
        function ChangeRedColor () {
            var linkTag = document.getElementById ("myLink");

                // the imported style sheet
            var importedSheet = linkTag.sheet ? linkTag.sheet : linkTag.styleSheet;
    
                // 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>