We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Summary

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

Syntax

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

Example

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

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

Notes

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'))

 

Specifications

Specification Status Comment
DOM
The definition of 'element.className' in that specification.
Living Standard  
DOM4
The definition of 'element.className' in that specification.
Obsolete  
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