THE WORLD'S LARGEST WEB DEVELOPER SITE

HTML DOM className Property

❮ Element Object

Example

Set the class for a <div> element with id="myDIV":

document.getElementById("myDIV").className = "mystyle";
Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The className property sets or returns the class name of an element (the value of an element's class attribute).

Tip: A similar property to className is the classList property.


Browser Support

Property
className Yes Yes Yes Yes Yes

Syntax

Return the className property:

HTMLElementObject.className

Set the className property:

HTMLElementObject.className=class

Property Values

Value Description
class Specifies the class name of an element. To apply multiple classes, separate them with spaces, like "test demo"

Technical Details

Return Value: A String, representing the class, or a space-separated list of classes, of an element

Examples

More Examples

Example

Get the class name of the first <div> element in the document (if any):

var x = document.getElementsByTagName("DIV")[0].className;

The result of x will be:

mystyle
Try it Yourself »

Example

Other examples on how to get the class name of an element:

var x = document.getElementsByClassName("mystyle")[0].className;
var y = document.getElementById("myDIV").className;
Try it Yourself »

Example

Get the class names of an element with multiple classes:

<div id="myDIV" class="mystyle test example">I am a DIV element</div>

var x = document.getElementById("myDIV").className;

The result of x will be:

mystyle test example
Try it Yourself »

Example

Overwriting an existing class name with a new one:

<div id="myDIV" class="mystyle">I am a DIV element</div>

document.getElementById("myDIV").className = "newClassName";
Try it Yourself »

Example

To add a class to an element, without overwriting existing values, insert a space and the new class name:

document.getElementById("myDIV").className += " anotherClass";
Try it Yourself »

Example

If there's a class of "mystyle" in an element with id="myDIV", change its font-size:

var x = document.getElementById("myDIV");

if (x.className === "mystyle") {
    x.style.fontSize = "30px";
}
Try it Yourself »

Example

Toggle between two class names. This example looks for a "mystyle" class in <div>, and if it exist, it will be overwritten by "mystyle2":

function myFunction(){
    var x = document.getElementById("myDIV");
    // If "mystyle" exist, overwrite it with "mystyle2"
    if (x.className === "mystyle") {
        x.className = "mystyle2";
    } else {
        x.className = "mystyle";
    }
}
Try it Yourself »

Example

Toggle between class names on different scroll positions - When the user scrolls down 50 pixels from the top, the class name "test" will be added to an element (and removed when scrolled up again).

window.onscroll = function() {myFunction()};

function myFunction() {
    if (document.body.scrollTop > 50) {
        document.getElementById("myP").className = "test";
    } else {
        document.getElementById("myP").className = "";
    }
}
Try it Yourself »

Related Pages

CSS Tutorial: CSS Selectors

CSS Reference: CSS .class Selector

HTML DOM Reference: HTML DOM classList Property

HTML DOM Reference: HTML DOM getElementsByClassName() Method

HTML DOM Reference: HTML DOM Style Object


❮ Element Object