JS : classList属性及方法

马黑黑 · 发表于 2023-3-17 13:03

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2023-3-17 13:07 编辑

classList 属性返回元素的类名列表。例如，下面的 HTML 元素：

<div id="mybox" class="box1 box2"></div>

从HTML代码中可知，上面的元素，id 为 mybox，它使用了两个类名，box1 和 box2，mybox.classList 将返回 DOMTokenList 对象：

{
"0": "box1",
"1": "box2"
}

也就是说，classList 属性告知我们，mybox 有两个 class 类名，一个叫 box1，一个叫 box2，这与我们设计的 HTML 元素相一致。

classList 不仅仅可以读取元素对象的类名列表，它还提供添加和移除 class 类名的方法，语法分别如下：

① 添加类名：element.classList.add('class名称');
②移除类名：element.classList.remove('class名称');

试着考虑以下 HTML 元素：

<div id="mybox" class="box1"></div>

mybox 只有一个类名，现在根据需要，我们需要给它动态添加 box2 类名：

mybox.classList.add('box2');

交互需要，现在想把 box2 类名从 mybox 类名列表中删除：

mybox.classList.remove('box2');

这些，没有什么难度，理解与记忆都是小事。不过，具体使用时需要注意，待操作的 HTML 元素必须具备 class 属性，且这些属性必须在 CSS 中设定，否则，虽然可以成功添加、移出类名，体现在 DOM 上的效果会出不来。

下楼给出一个应用实例：div 设定初始的class 属性，用于设置元素的背景色，随后，当用户单击 div，会添加另一个 class 属性，用以改变（其实是覆盖） div 元素的背景色，再单击 div，将新添加的 class 属性移出，恢复原来的背景色，如此反复。