You are here: Reference > JavaScript > client-side > style handling > properties > cssText (CSSRule, rule, style, ...)

cssText property (CSSRule, rule, style, ...)

Browser support:
Sets or retrieves the contents of a style declaration as a string.
The CSSValue.cssText, CSSRule.cssText and rule.cssText properties are read-only, all others are read/write.

Syntax:

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

Possible values:

String that sets or returns the text value.
Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the cssText property for the style attribute:
<head>
    <script type="text/javascript">
        function GetStyle (elem) {
            alert (elem.style.cssText);
        }
    </script>
</head>
<body>
    <button onclick="GetStyle (this);" style="border:1px solid red;color:blue;">Get the complete style as a string!</button>
</body>
Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the cssText property for style sheets and rules:
Code
style.css
<head>
    <style id="myStyle" type="text/css">
        body {
            background-color: red;
        }
        
        button {
            background-color: cyan;
            border: solid 1px blue;
        }
    </style> 
    <script type="text/javascript">
        function GetStyleSheetContent () {
            var styleTag = document.getElementById ("myStyle");

                // the style sheet in the style tag
            var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;

            var message = "";
            if ('cssText' in sheet) {   // Internet Explorer
                message = sheet.cssText;
            }
            else {  // Firefox, Opera, Google Chrome and Safari
                for (var i = 0; i < sheet.cssRules.length; i++) {
                    message += sheet.cssRules[i].cssText;
                }
            }
            alert ("The contents of the imported style sheet:\n\n" + message);
        }
    </script> 
</head>
<body>
    <button onclick="GetStyleSheetContent ()">Get the contents of the styleSheet!</button>
</body>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content