Difference between className and classList

Question

Which one of the following should be preferred under what circumstances?

btnElement.classList.add('btn');

btnElement.className = 'btn';

Answer 1

Using "classList", you can add or remove a class without affecting any others the element may have. But if you assign "className", it will wipe out any existing classes while adding the new one (or if you assign an empty string it will wipe out all of them).

Assigning "className" can be a convenience for cases where you are certain no other classes will be used on the element, but I would normally use the "classList" methods exclusively.

And "classList" also has handy "toggle" and "replace" methods.

https://teamtreehouse.com/community/difference-between-classlist-and-classname

Answer 2

Using "classList", you can add or remove a class without affecting any others the element may have. But if you assign "className", it will wipe out any existing classes while adding the new one (or if you assign an empty string it will wipe out all of them)

classList

Using classList, you can add or remove a class without affecting any other classes the element may have.

So this is helpful for adding additional classes to an element that contain other classes.

classList has some handy methods like toggle and replace.

if (clicked) {
    button.classList.add('clicked');
} else {
    button.classList.remove('clicked');
}

Here if the button was clicked it will add the clicked class along with other classes the element may have and it will remove only the clicked class from the element.

className

If you use className, it will wipe out any existing classes while adding the new one (or if you assign an empty string it will wipe out all of them).

Using className can be convenience when you know this element will not use any other classes.

if (clicked) {
    button.className = 'clicked';
} else {
    button.className = '';
}

In this case, className will wipe all the classes the element may have and add clicked class to it. The empty string('') will wipe all the classes.

Conclusion

the recommendation would be to use className whenever possible.

Use classList when you need classList methods like toggle, replace, etc.

context https://dev.to/microrony/difference-between-classlist-and-classname-45j7

Answer 3

ClassList as the name suggest is the list of classes in an element.

If you have multiple classes on an element and you want to add/remove one without altering the rest you should use classList.

classList also provides methods like toggle which are really useful.

function toggleClass(){
  let txt = document.querySelector("h2");
  txt.classList.toggle("changebg");
}

.font-style {
  font-family: sans-serif;
}

.changebg {
  background-color: lightcoral;
}

<h2 class="font-style" >Hello World!</h2>
<button onclick='toggleClass()'>Toggle Background Class</button>

Answer 4

You can see the changes in JavaScript to apply same difference one with use of classList and other with className .

It will be clear from 1st btn only that classList add extra name in class while className replaces the whole class (only .border is applied) .
Further are different function of classList which cannot be achieved by className and at last 4 line of code is reduced to 1 liner with use of toggle .

So you should look to your needs : Like, if you want to completely replace the class property names than use className else you can use classList property with different methods .add() .remove() .replace() .toggle() to only have changes in specific without hampering all names of class

Instruction for below snippet : Reload the snippet when you click one button so that clear differences can be seen on next btns

var classList1 = document.getElementById("part1")
var classname2 = document.getElementById("part2")

function funcAdd() {
  classList1.classList.add("border");
  classname2.className = "border";
}

function funcRemove() {
  classList1.classList.remove("color");
  classname2.style.color = "black";
}

function funcReplace() {
  classList1.classList.replace("background", "background1");
  classname2.style.backgroundColor = "lightgreen";
}

function funcToggle() {
  classList1.classList.toggle("color1");
  if (classname2.style.color == "gold") {
    classname2.style.color = "blue";
  } else {
    classname2.style.color = "gold";
  }
}

.background {
  background-color: red
}

.background1 {
  background-color: lightgreen
}

.color {
  color: blue
}

.font {
  font-size: 24px;
}

.border {
  border: 10px solid black
}

.color1 {
  color: gold;
}

<div id="part1" class="background color font">classList</div>
<br><br><br>

<div id="part2" class="background color font">className</div>
<br><br><br>

<button onclick="funcAdd()">Add a border class</button>
<button onclick="funcRemove()">Remove a color class</button>
<button onclick="funcReplace()">Replace a background class</button>
<button onclick="funcToggle()">Toggle a color class</button>
<br><br>

Answer 5

I have just known one thing difference between className and classList. className returns string within they are names of the current element and classList also returns names but as an array.