TheclassName property of theElement interface gets and sets the value of theclass attributeof the specified element.

Value

A string variable representing the class or space-separated classes of the current element.

Examples

const el = document.getElementById("item");el.className = el.className === "active" ? "inactive" : "active";

Notes

The nameclassName is used for this property instead ofclassbecause of conflicts with the "class" keyword in many languages which are used tomanipulate the DOM.

className can also be an instance ofSVGAnimatedString iftheelement is anSVGElement. It is easier to get/set theclass attribute of an element usingElement.getAttribute andElement.setAttribute if you are dealing with SVG elements. However, takeinto account thatElement.getAttribute returnsnullinstead of"" if theelement has an emptyclass attribute.

elm.setAttribute("class", "my-class");const myClass = elm.getAttribute("class");

Specifications

Browser compatibility

See also

• element.classList