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,