<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>classList</title> <style type="text/css"> .box{ width: 100px; height: 100px; margin: 10px 0; background-color: blue; } .red{ background-color: red; } </style> </head> <body> <div class="box"></div> <div class="box"></div> <script type="text/javascript">
/*classList:获取class列表属性
length class的长度
add() 添加class方法
remove() 删除class方法
toggle() 切换class方法
*/
var box = document.querySelectorAll('.box'); /*for (var i = 0; i < box.length; i++) { box[i].isChecked = false; box[i].onclick = function () { if (this.isChecked) { this.className = 'box'; } else { this.className = 'box red'; } this.isChecked = !this.isChecked; } }*/ /*for (var i = 0; i < box.length; i++) { box[i].isChecked = false; box[i].onclick = function () { console.dir(this); if (this.isChecked) { this.classList.remove('red'); } else { this.classList.add('red'); } this.isChecked = !this.isChecked; } }*/ // 三目写法 for (var i = 0; i < box.length; i++) { box[i].isChecked = false; box[i].onclick = function () { console.dir(this); /*if (this.isChecked) { this.classList.remove('red'); } else { this.classList.add('red'); }*/ // this.isChecked ? this.classList.remove('red') : this.classList.add('red'); this.classList[this.isChecked?'remove':'add']('red'); this.isChecked = !this.isChecked; } } </script> </body> </html>