本文主要重點
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>