本文主要重点
classList 有4个方法
// add("class名字"); 给元素中添加一个class,例如 add("checked")
// remove("class名字"); 删除class
// contains("class名字") ;判断元素的classList是否包含这个class，包含返回true,否则返回false
// toggle() 切换class,如果元素有这个class,我们就删掉，否则就加上class
效果图：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>复选框</title> <style> .options>a { color: #333; margin: 20px; } .checked { color: red!important; } </style> </head> <body> <div class="box"> <div class="options"> <a href="javascript:;" class="checked">语文</a> <a href="javascript:;">数学</a> <a href="javascript:;">英语</a> </div> </div> <script> //目标是：复选框效果，样式比较简单，点击字体变颜色即可 var list = document.querySelectorAll(".options a"); //先获取所有标签 console.log(list); //类数组 // list.onclick = function() { //一组元素不能直接操作，只能通过下标操作，哪怕这组元素只有一个 // } for (var i = 0; i < list.length; i++) { list[i].onclick = function() { //第一种方法，判断有没有这个类名，但是如果是多个类名尼 // if (this.className == 'checked') { //如果包含这个class,点击就去掉class // this.className = ''; // } else { //否则取消 // this.className = 'checked'; // } //第二种方法：classList //console.log(this.classList); //classList 有4个方法 // add("class名字"); 给元素中添加一个class,例如 add("checked") // remove("class名字"); 删除class // contains("class名字") ;判断元素的classList是否包含这个class，包含返回true,否则返回false // toggle() 切换class,如果元素有这个class,我们就删掉，否则就加上class // if (this.classList.contains("checked")) { //如果classList包含这个class,点击就删掉class，否则添加class // this.classList.remove("checked"); // } else { //否则取消 // this.classList.add("checked"); // } // 第三种方法 toggle this.classList.toggle('checked'); } } </script> </body> </html>