JavaScript Element className Property

What You’ll Learn

Element.className is a read/write instance property that gets and sets the element’s class attribute as a string. Learn why it is not called class, when to prefer classList, and how to replace the whole class string safely—with five examples and try-it labs.

Introduction

HTML uses the class attribute for CSS hooks. In JavaScript, the matching DOM property is className—a string that holds one class or several classes separated by spaces.

Assigning className replaces the entire class string. That is powerful for resetting state, but for adding or removing a single class, classList is usually clearer.

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

Understanding the Property

MDN: the className property of the Element interface gets and sets the value of the class attribute of the specified element.

• Get / set — readable and writable string.
• Named className — avoids the reserved class keyword.
• Full replace — assignment overwrites all previous classes.
• Baseline — widely available since July 2015 (MDN).

📝 Syntax

className

Value

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

📋 MDN Toggle Example Shape

MDN flips between active and inactive by rewriting the whole string:

<div id="item" class="active">Status</div>

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

Related learning: classList, getAttribute("class"), and setAttribute("class", ...).

Examples Gallery

Examples follow MDN Element: className. Labs use a simple element with an id so you can read and rewrite the class string.

const el = document.getElementById("item");
console.log(el.className);

card featured

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

inactive

const el = document.createElement("div");
el.className = "one two three";
console.log(el.className);

el.className = "reset";
console.log(el.className);
console.log(el.outerHTML);

one two three
reset
<div class="reset"></div>

const el = document.createElement("div");
el.className = "card";
el.classList.add("featured");
console.log({
  className: el.className,
  viaAttribute: el.getAttribute("class"),
  hasFeatured: el.classList.contains("featured")
});

{
  "className": "card featured",
  "viaAttribute": "card featured",
  "hasFeatured": true
}

console.log({
  supported: "className" in Element.prototype,
  type: "string (HTML elements)",
  tip: "Use classList for add/remove/toggle; className to replace all",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "type": "string (HTML elements)",
  "tip": "Use classList for add/remove/toggle; className to replace all",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Reading the full class string for logging or cloning.
• Resetting an element to a known class set in one assignment.
• Simple two-state swaps when only one class is present.
• Initializing a new element with several classes at once.
• Teaching the difference between HTML attributes and DOM properties.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Named className because class is a reserved keyword in many languages.
• Prefer classList for adding/removing one class without wiping others.
• Related: classList, clientHeight, EventTarget, JavaScript hub.

💡 Best Practices