JavaScript Element className Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word CLASSNAME

Definition

Element.className is a read/write property that reflects the element’s HTML class attribute as a string. One class, or several classes separated by spaces (MDN).

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use el.className. Start with this line.

JavaScript
el.className / el.className = "…"
CallWhat it does
el.className / el.className = "…"Primary signature.

Built into the browser. Read or assign el.className — no import required.

Library declarations
JavaScript
el.className / el.className = "…"

Parameters

ParameterDescription
classListOptional. Safer for per-class edits

Return Value

Return ValueDescription
*The current value of el.className.

JavaScript Examples

Example 1 — Read the Class String

Read className from an element that has two classes.

JavaScript
const el = document.getElementById("item");

console.log(el.className);              // "card featured"
console.log(el.getAttribute("class"));  // "card featured"
Try It Yourself

How It Works

  1. Find the element. getElementById("item") returns the node.
  2. Read the property. className is the space-separated class string.
  3. Check the attribute. On HTML elements, getAttribute("class") matches.
  4. Remember the names. HTML uses class; the DOM property is className.

Example 2 — MDN Active / Inactive Toggle

Replace the whole string based on the current value (MDN’s example shape).

JavaScript
const el = document.getElementById("item");

el.className = el.className === "active" ? "inactive" : "active";
console.log(el.className);  // "inactive"
Try It Yourself

How It Works

  1. Start with one class. The element’s class is exactly "active".
  2. Compare the string. The ternary picks "inactive" when the current value is "active".
  3. Assign the new string. That assignment replaces the entire class value.
  4. Limit. With multiple classes, prefer classList.toggle("active") so other tokens stay.

Example 3 — Replace All Classes

Assignment overwrites every previous class — useful for a clean reset.

JavaScript
const el = document.createElement("div");

el.className = "one two three";
console.log(el.className);  // "one two three"

el.className = "reset";
console.log(el.className);  // "reset"
console.log(el.outerHTML);  // '<div class="reset"></div>'
Try It Yourself

How It Works

  1. Set three classes. The first assignment stores "one two three".
  2. Replace the string. "reset" removes one, two, and three.
  3. Check the markup. outerHTML shows the updated class attribute.
  4. Rule of thumb. Use full-string assign for resets; use classList to add one class.
Compatibility

Browser Support

Element.className is Baseline Widely available (MDN: since July 2015). Safe across modern and older evergreen browsers.

✓ Baseline · Widely available

Element.className

Get/set the class attribute as a string — long-standing DOM support on HTML elements.

99% Widely available
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
className Excellent

Bottom line: Safe for production on HTML elements. For SVG, prefer classList or getAttribute/setAttribute because SVGElement.className (SVGAnimatedString) is deprecated.

Frequently Asked Questions

It gets and sets the element's class attribute as a single string — one class name, or several names separated by spaces.
No. MDN marks Element.className as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard. Note: SVGElement.className (SVGAnimatedString) is deprecated — prefer classList or getAttribute/setAttribute for SVG.
Because class is a reserved keyword in many languages used to work with the DOM, so the DOM property was named className.
Use classList to add, remove, toggle, or check individual classes. Use className when you want to read or replace the entire class string at once.
Yes. el.className = "active" replaces every previous class with just "active". To clear all classes, assign an empty string.
On SVGElement, className can be an SVGAnimatedString (and that SVG-specific form is deprecated). Prefer el.classList, or getAttribute("class") / setAttribute("class", ...).

Next: clientHeight

Learn how to read an element’s inner height including padding.

clientHeight tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element classList Property JavaScript Element clientHeight Property