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

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>

Copy Code

Preview

Syntax Highlighter

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>