原生js查询、添加、删除类

1.添加类

　为标签添加一个class的类

　　如：<div id="box" class="box">内容</div>

　　 　　document.getElementById('box').classList.add('on');

　也可以通过这个方法添加多个类

　　如：document.getElementById('box').classList.add('on', 'hua', 'liang'); // 添加多个类使用逗号分隔开

 

2.移除类

　移除一个类

　　如：document.getElementById('box').classList.remove('on');

　也可以通过这个方法移除多个类

　　如：document.getElementById('box').classList.remove('on', 'hua', 'liang'); // 移除多个类使用逗号分隔开

 

3.查询类

　查询是否含有某一个类

　　如: document.getElementById('box').classList.contains('on');  // 查询到类返回true，查询不到类返回false

 

　　方法1.判断class 名是否存在

　　var aw1 = document.getElementById('huatu'); 

　　if(aw1.classList.contains('on') == true){

 　　 　aw1.classList.remove('on');

　　　  aw1.style.margin = '20px auto';

　　　  aw1.style.textAlign = 'center';

　　 }else{

　　　  aw1.classList.add('on');

　　　  aw1.style.width = '100%';

　　　  aw1.style.lineHeight = '100px';

　　　  aw1.style.background = '#f00';

　　}

　　方法2. 判断class 名是否存在
　　function hasClass(element, cls) {
　　　　return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
　　} 
　　hasClass(document.querySelector("html"), 'no-js');

 

　

 

转载于:https://www.cnblogs.com/hermit-gyqy/p/10635137.html