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

You are here: Reference > JavaScript > client-side > HTML DOM > properties > className

className property

Browser support:

Sets or retrieves the style class or classes that belong to the element.

With this property you can assign Cascading Style Sheets (CSS) declarations to an element.

CSS is useful for adding styling behaviors to an element. For more information about Cascading Style Sheets, please see the page for style handling.

Syntax:

object.className;

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

This property is read/write.

HTML page for this property: class

Possible values:

String that sets or retrieves a space-separated list of the related class names.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the class attribute:

<head>
    <style>
        .text {color: red;}
    </style>
</head>
<body>
    <p class="text" id="myP">
        This text is red.
    </p>
</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 class attribute and the className property:

<head>
    <style>
        .red {
            color: red;
        }

        .green {
            color: green;
        }
    </style>
    <script type="text/javascript">
        function ChangeClass () {
            var parag = document.getElementById ("myP");
            parag.className = (parag.className == "red")? "green" : "red";
        }
    </script>
</head>
<body>
    <p class="red" id="myP">
        The contents of the paragraph
    </p>

    <button onclick="ChangeClass ();">Change className!</button>
</body>