TypeScript 获取元素的 class 列表

当我们需要针对特定的 HTML 元素进行样式控制时，通常是通过给元素添加 class 来实现。在 TypeScript 中，我们可以将某个元素的 class 列表获取到，这样就可以进行更加灵活的操作。

获取元素的 class 列表

在 TypeScript 中，我们可以使用以下代码来获取某个元素的 class 列表：

const element = document.getElementById("my-element");
const classList = element.classList;

其中，element 表示要获取 class 列表的 HTML 元素，classList 就是获取到的 class 列表，它是一个 DOMTokenList 类型的对象。

操作 class 列表

获取到 class 列表后，我们可以进行以下操作：

添加 class

我们可以通过 add 方法向 class 列表中添加一个新的 class，例如：

classList.add("new-class");

这样就会给元素添加一个名为 new-class 的 class。

移除 class

我们可以通过 remove 方法从 class 列表中移除一个具体的 class，例如：

classList.remove("old-class");

这样就会从元素的 class 列表中移除名为 old-class 的 class。

切换 class

我们可以通过 toggle 方法来切换元素所拥有的某个 class，例如：

classList.toggle("active");

这里的 active 表示将要切换的 class。如果元素原本没有 active 这个 class，则添加它；如果元素已经拥有 active 这个 class，则移除它。

检查 class

我们可以通过 contains 方法来检查一个元素是否拥有某个 class，例如：

const hasClass = classList.contains("middle");

这样就会返回一个布尔值，表示元素是否拥有 middle 这个 class。

总结

通过 TypeScript 获取元素的 class 列表，可以方便我们进行样式控制，以及判断元素是否拥有某个 class。同时，我们也可以通过上述操作来动态地修改元素的 class，达到更好的交互效果。