使用纯 JavaScript 添加或者删除类

虽然 JQuery 可以轻松添加和删除类，但使用纯 JavaScript 几乎同样容易。
首先，我们需要创建对元素的引用，这可以通过元素的唯一 id（使用 id 属性定义）来完成。
在 JavaScript 中，我们可以为此使用 document.getElementById()：

var e = document.getElementById("unique_id_of_element");
e.className += " name_of_class_to_be_added";

要删除该类，我们只需将其设置回其原始状态即可。
也就是说，如果已经存在任何类，则需要列出这些类。
例如：

e.className = "some_class another_class";

使用 JQuery 添加和删除 CSS 类是通过 addClass 和 removeClass 方法完成的。

让我们从向 HTML 元素添加一个类开始：

$("#unique_element_id").addClass("your_class_name");

如果我们稍后想再次删除该类，请使用如下所示的 removeClass 方法：

$("#unique_element_id").removeClass("your_class_name");

使用纯 JavaScript：

var e = document.getElementById("unique_id_of_element");
e.className += " name_of_class_to_be_added";
e.className = ""; /* Reset the class-list (remove classes) */

何时使用纯 JavaScript 而不是 JQuery

如果我们不需要库的全部功能，纯 JavaScript 方式可能会更好。
有时我们可能希望避免使用纯 JavaScript 解决方案，因为它很难在所有浏览器中运行。
但是，在这种情况下，它应该是相当安全的。

上面提到的纯 JavaScript 解决方案的唯一缺点是它需要空间来与元素上潜在的现有类分开。
可能会感到困惑，但仔细想想还是有道理的。

还有另一种方法，但 Internet Explorer 10 不支持它。
然而，这浏览器太旧了（从 2012 年开始），所以我们也不应该支持它。
告诉用户切换到另一个浏览器，或者升级他们的系统。

var element = document.getElementById("unique_id_of_element");
e.classList.add("new_class");
e.classList.remove("new_class");