原生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');

 

4. 反转

　　dom.classList.toggle('active') // 如果当前dom 不存在 类名 active 则为添加 active  类名，如果存在则为 删除 active 类名

 

5. 切换

　　<style type="text/css">
　　.active{
　　　　background-color: #f00;
　　}
　　.list-a{
　　　　width:20%;
　　　　line-height: 45px;
　　}
　　</style>　

　　<ul>
　　　　<li class="list-a active">01</li>
　　　　<li class="list-a ">02</li>
　　　　<li class="list-a ">03</li>
　　　　<li class="list-a ">04</li>
　　　　<li class="list-a ">05</li>
　　　　<li class="list-a ">06</li>
　　　　<li class="list-a ">07</li>
　　</ul>

 

　　var list = document.getElementsByTagName('li');
　　for(var i = 0; i < list.length; i++){
　　　　list[i].onclick = function(){
　　　　　　if(this.classList.contains('active') != true){     // 如果当前找不到 active 类则为当前点击元素添加一个active类
　　　　　　　　for(var k = 0; k < list.length; k++){      // 在添加 active 类之前 先移除所有元素的 active 类
　　　　　　　　　　list[k].classList.remove('active');
　　　　　　　　}
　　　　　　　　this.classList.add('active');      // 给当前点击的元素添加一个active类
　　　　　　}
　　　　}
　　}