Element: className property
TheclassName
property of the
Element
interface gets and sets the value of theclass
attribute
of 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 ofclass
because of conflicts with the "class" keyword in many languages which are used to
manipulate the DOM.
className
can also be an instance ofSVGAnimatedString
if
theelement
is anSVGElement
.It is better to get/set the
className
of an element usingElement.getAttribute
and
Element.setAttribute
if you are dealing with SVG elements. However, take
into account thatElement.getAttribute
returns
null
instead of""
if theelement
has an emptyclass
attribute.
elm.setAttribute( "class", elm.getAttribute( "class" ));
Note:Theclass
is anHTML Attribute,while the
className
is aDOM Property.
Specifications
Specification |
---|
DOM Standard #ref-for-dom-element-classname① |
Browser compatibility
BCD tables only load in the browser