className gets and sets the value of the class attribute of the specified element.


var cName = elementNodeReference.className;
elementNodeReference.className = cName;
  • cName is a string variable representing the class or space-separated classes of the current element.


let elm = document.getElementById('item');

if(elm.className === 'active'){
    elm.className = 'inactive';
} else {
    elm.className = 'active';


The name className is used for this property instead of class because of conflicts with the "class" keyword in many languages which are used to manipulate the DOM.

className can also be an instance of SVGElement if the element is an SVGAnimatedString. It is better to get/set theclassName of an element using Element.getAttribute and Element.setAttribute if you are dealing with SVG elements.

elm.setAttribute('class', elm.getAttribute('class'))

The class is an HTML Attribute, while the className is a DOM Property


Specification Status Comment
The definition of 'element.className' in that specification.
Living Standard  
The definition of 'element.className' in that specification.
Document Object Model (DOM) Level 2 HTML Specification
The definition of 'element.className' in that specification.
Obsolete Initial definition

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
Feature Android webview Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

See also