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 SVGAnimatedString
if the element
is an SVGElement
. It is better to get/set the className
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. |
Recommendation | |
Document Object Model (DOM) Level 2 HTML Specification The definition of 'element.className' in that specification. |
Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
See also
Document Tags and Contributors
Tags:
Contributors to this page:
muralikg,
destin.moulton,
erikadoyle,
cvrebert,
Sebastianz,
fscholz,
teoli,
BobHensley,
DrifterZ28,
kscarfone,
Prachi_Dighe,
Sheppy,
ethertank,
rpncreator,
ziyunfei,
dextra,
Crash,
Dewang,
Ptak82,
RobG,
BenoitL,
GT,
Pmsyyz,
Nickolay,
Dria,
JesseW
Last updated by:
muralikg,