className 和 classList.value 有什么区别？

Question

在将此答案标记为重复之前，我正在谈论 “classList.value”，而不是 “classList”。

有什么区别：

element.className = 'main';
element.classList.value = 'main';

它们都可以“获取和设置指定元素的类属性的值”（MDN 对 className 作用的描述）。

我注意到性能差异似乎很小（运行多次）。

那么，有什么区别吗？

我部分是出于好奇，但也因为我在任何地方都看到“className”似乎受到青睐 - 根据 MDN 的浏览器兼容性，它确实出现在 classList.value 之前。

.className 通常建议用于设置或清除类列表。但是在切换、添加、删除时也推荐使用.classList。那么，为什么不使用 .classList.value 来保持一致性呢？

Answer 1

无论我走到哪里，似乎

.className

都受到青睐

当然。它更短、更简单、更快，并且 - 正如您所指出的 - 受到更多（较旧的）浏览器的支持。所以几乎没有任何理由使用

.classList.value

。

但是在切换、添加、删除时也建议使用

.classList

。那么，为什么不使用

.classList.value

来保持一致性呢？

类 list 在与（切换/添加/删除）individual类交互时使用。它比在

.className

上进行字符串操作要容易得多，就像过去

.classList

还不可用一样。

一般很少更换整个列表。您可能会这样做是为了删除all类名称，但是当使用

classList

单个类时，您实际上应该只对您的代码负责的那些进行操作。在这种情况下，您不会使用

.value

，因此无法实现一致性。该属性的存在主要是为了接口的完整性，以及

DOMTokenList

s 的其他用途。

如果您确实对整个列表进行完全控制，并且想要一次操作所有列表，那么

.className

又更简单、更短。