className 和 classList 的区别

Question

在什么情况下应该优先选择以下哪一项？

btnElement.classList.add('btn');

btnElement.className = 'btn';

Answer 1

使用“classList”，你可以添加或删除一个类而不影响任何 其他元素可能有。但是如果你分配“className”，它会 在添加新类时清除所有现有类（或者如果您 分配一个空字符串，它将清除所有字符串）。

分配“className”可以方便您的情况 肯定不会在元素上使用其他类，但我会 通常只使用“classList”方法。

而且“classList”也有方便的“toggle”和“replace”方法。

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

Answer 2

使用“classList”，您可以添加或删除一个类，而不会影响该元素可能拥有的任何其他类。但是如果你分配“className”，它会在添加新的类时清除所有现有的类（或者如果你分配一个空字符串，它会清除所有的类）

类列表

使用 classList，您可以添加或删除一个类，而不会影响该元素可能具有的任何其他类。

因此，这有助于向包含其他类的元素添加其他类。

classList 有一些方便的方法，例如切换和替换。

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

如果按钮被点击，它将添加被点击的类以及元素可能具有的其他类，它只会从元素中删除被点击的类。

类名

如果您使用 className，它会在添加新类时清除所有现有类（或者如果您分配一个空字符串，它将清除所有类）。

当您知道此元素不会使用任何其他类时，使用 className 会很方便。

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

在这种情况下，className 将清除该元素可能具有的所有类，并将单击的类添加到其中。空字符串('') 将擦除所有类。

结论

建议尽可能使用 className。

当您需要切换、替换等 classList 方法时使用 classList。

上下文 https://dev.to/microrony/difference-between-classlist-and-classname-45j7

Answer 3

ClassList 顾名思义是元素中的类列表。

如果你在一个元素上有多个类，并且你想添加/删除一个而不改变其余部分，你应该使用classList。

classList 还提供了像toggle 这样非常有用的方法。

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

您可以看到 JavaScript 中的更改以应用相同的差异，一个是使用 classList，另一个是使用 className。

从第一个 btn 可以清楚地看出，classList 在class 中添加了额外的名称，而className 替换了整个class（仅应用了.border）。
此外，classList 的不同功能是 className 无法实现的，最后使用 toggle 将 4 行代码减少为 1 行。

所以你应该看看你的需求：比如，如果你想完全替换 class 属性名称而不是使用 className 否则你可以使用 classList 属性与不同的方法 .add() .remove() .replace() .toggle() 只进行特定更改而不妨碍class 的所有名称

以下 sn-p 说明：单击一个按钮时重新加载 sn-p，以便在下一个 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>