用JavaScript classList控制元素

For a very long time, manipulating classes was something that JavaScript did very poorly, often requiring the use of awkward regular expressions, which was one of the reasons that so many developers turned to JQuery in years past. Thankfully, JavaScript has had its own powerful class manipulation features for some time, with excellent browser support.

很长一段时间以来，操纵类是JavaScript所做的非常糟糕的事情，常常需要使用笨拙的正则表达式，这是许多开发人员在过去几年中转向JQuery的原因之一。 值得庆幸的是， JavaScript拥有强大的类操纵功能已有一段时间了，并具有出色的浏览器支持。

Manipulating classes in native JavaScript is achieved with the classList property. If we have a figure element on a page:

使用classList属性可以在本机JavaScript中操作类。 如果页面上有一个figure元素 ：

<figure class="aki">
    <img src="aikido.jpg" alt>
    <figcaption>An aikido teacher throwing a student</figcaption>
</figure>

And we grab a reference to the element using getElementsByClassName:

然后，我们使用getElementsByClassName获取对元素的引用：

var akifig = document.getElementsByClassName("aki")[0];

We can get array-like structure of the classes currently applied to the element by using classList. In this case, I’ll write the results to the console:

我们可以使用classList获得当前应用于元素的类的类数组结构。 在这种情况下，我会将结果写入console ：

console.log(akifig.classList);

> ["aki"]

新增课程 (Adding a class)

We can add a class to the element by using the add method:

我们可以使用add方法将一个类添加到元素中：

akifig.classList.add("martial")

akifig.classList
> ["aki","martial"]

Naturally, the martial class will not make any difference to the appearance of the element unless the class is specified in a stylesheet.

当然，除非在样式表中指定了martial类，否则martial类不会对元素的外观产生任何影响。

Multiple classes can be added by including them in the list:

可以通过将多个类包括在列表中来添加多个类：

akifig.classList.add("martial", "arts");

删除课程 (Removing a class)

A class can be removed from an element with, not surprisingly, remove:

可以使用remove从元素中删除类，这并不奇怪：

akifig.classList.remove("aki")

akifig.classList
> ["martial"]

Like add, it’s also possible to remove multiple classes by listing them.

像add一样，也可以通过列出多个类来删除它们。

You can remove all classes from an element by setting the its className property to an empty string:

您可以通过将元素的className属性设置为空字符串来删除元素中的所有类：

akifig.className = "";

检查元素是否具有类 (Checking if an element has a class)

You can check if an element has a specific class by using contains:

您可以使用contains来检查元素是否具有特定的类：

if (akifig.classList.contains("martial")) {
    console.log("Hiya");
}

切换课程 (Toggling a class)

Rather than specifically adding and removing a class in response to an action, it’s much easier to toggle it. If we have a button element underneath the figure:

与其专门为响应某个动作而添加和删除一个类，还不如toggle它。 如果该figure下面有一个按钮元素 ：

<figure class="aki">
    <img src="aikido.jpg" alt>
    <figcaption>An aikido teacher throwing a student</figcaption>
</figure>
<button>Switch</button>

And we grab the button with JavaScript, then we can easily switch a showhide class back and forth on click:

然后使用JavaScript抓取按钮，然后单击即可轻松地来回切换showhide类：

var akifig = document.getElementsByClassName("aki")[0];
var switchHit = document.querySelector("figure + button");

switchHit.addEventListener("click", function() {
    akifig.classList.toggle("hide");
})

The hide class might consist of the following declaration:

hide类可能包含以下声明：

.hide { display: none; }

… which will effectively flip the visibility of the figure element back and forth with every click.

…每次单击都会有效地来回切换figure元素的可见性。

IE限制与替代 (IE Limitations & Alternatives)

IE 10 & 11, together with Android 4.3 and earlier, do not support classList on SVG elements; nor do they allow multiple parameters on add or remove; IE9 and earlier does not support classList at all. To deal with these limitations, I would recommend adding the classList.js shim, or using className instead. Using the previous examples:

IE 10和11，以及Android 4.3和更低版本，均不支持SVG元素上的classList ； 它们也不允许在add或remove使用多个参数; IE9和更早版本完全不支持classList 。 为了解决这些限制，我建议添加classList.js shim ，或改用className 。 使用前面的示例：

To add a class, replacing all other classes:

要添加一个类，替换所有其他类：

akifig.className = "martial";

To remove all classes from an element:

要从元素中删除 所有类：

akifig.className = "";

To add a class without removing other applied classes:

要添加一个类而不删除其他已应用的类：

akifig.className += " flip";

(Note the space in front of the added class name).

(注意添加的类名前面的空格)。

翻译自: https://thenewcode.com/368/Controlling-Elements-with-JavaScript-classList