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