1.classList基础用法
var a = document.getElementBy("DIV");
1.使用classList返回所选元素的类名,是一个数组,一个类名占一个长度(a.classList.length)。
2.a.classList.add("classname1") ; 添加一个类名
3.a.classList.remove("classname2") ; 去掉一个类名
4.a.classList.toggle("classname3"); 引号中的类名,有就删除,没有就添加。比较智能的结合了1,2点,用于切换十分方便
5.a.classList.contains("classname4"); 判断一个类型是不是存在,返回true和false
2.发现问题:使用classList.toggle修改类名失败,类名闪烁
问题原因:tap事件会触发两次,一次加,一次减
解决方法:使用定时器防抖
//事件监听
mui(document.body).on('tap', '#skill3', function() {
switchClicked('skill3')
});
// 切换颜色
var switchClickedCD = true
function switchClicked(id) {
if(switchClickedCD){
setTimeout(function(){
var obj = document.getElementById(id);
obj.classList.toggle("mui-badge-primary")
console.log(obj.classList.contains('mui-badge-primary'))
switchClickedCD=true
},200)
}
switchClickedCD=false
}
3.拓展:其他方案
用nmd原生,上vue,用v-show不比这个方便多了?