JS : classList属性及方法
本帖最后由 马黑黑 于 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 属性移出，恢复原来的背景色，如此反复。
本帖最后由 马黑黑 于 2023-3-17 13:05 编辑 <br /><br /><style>
#mydiv {
margin: 50px auto;
width: 200px;
height: 200px;
cursor: pointer;
}
.pink { background: pink; }
.purple { background: purple; }
</style>
<div id="mydiv" class="pink"></div>
<script>
let flag = true;
mydiv.onclick = () => {
flag ? mydiv.classList.add('purple') : mydiv.classList.remove('purple');
flag = !flag;
};
</script> 二楼代码：
<style>
#mydiv {
margin: 50px auto;
width: 200px;
height: 200px;
cursor: pointer;
}
.pink { background: pink; }
.purple { background: purple; }
</style>
<div id="mydiv" class="pink"></div>
<script>
let flag = true;
mydiv.onclick = () => {
flag ? mydiv.classList.add('purple') : mydiv.classList.remove('purple');
flag = !flag;
};
</script>
去点击了一下，看到了在两种颜色中的替换。 感谢黑黑的技能讲解，又学习一个JS属性{:4_187:} 红影 发表于 2023-3-17 20:14
感谢黑黑的技能讲解，又学习一个JS属性
不难的吧 红影 发表于 2023-3-17 20:13
去点击了一下，看到了在两种颜色中的替换。
是的，正如介绍的一样 马黑黑 发表于 2023-3-17 20:23
不难的吧
跟着看觉得不难，可能放到一堆代码里就又迷糊了{:4_173:} 马黑黑 发表于 2023-3-17 20:24
是的，正如介绍的一样
黑黑介绍这个，又是准备用在什么地方的吧？ 红影 发表于 2023-3-17 20:55
黑黑介绍这个，又是准备用在什么地方的吧？
没。介绍介绍。我们不用它也能实现相同的功能，这个你应该已经体会到。 马黑黑 发表于 2023-3-17 21:38
没。介绍介绍。我们不用它也能实现相同的功能，这个你应该已经体会到。
我好像没记住前面的{:5_102:} 红影 发表于 2023-3-17 22:47
我好像没记住前面的
CSS变量 马黑黑 发表于 2023-3-17 23:31
CSS变量
还是没想起来，我不知道你指的是哪个。{:4_173:} 红影 发表于 2023-3-18 10:51
还是没想起来，我不知道你指的是哪个。
比如我们之前控制关键帧动画的暂停、继续，多数都是使用CSS变量的方法实现的 马黑黑 发表于 2023-3-18 11:13
比如我们之前控制关键帧动画的暂停、继续，多数都是使用CSS变量的方法实现的
嗯嗯，我知道了。谢谢黑黑{:4_187:} 红影 发表于 2023-3-18 12:45
嗯嗯，我知道了。谢谢黑黑
不客气
页:
[1]