H5中操作类名的API

1.API
a) box.classList.add(‘类名’):添加类名
b) box.classList.remove(‘类名’):删除类名
c) box.classList.contains(‘类名’):是否包含该类名
d) box.claaList.toggle(‘类名’):切换
2.获取元素
a) 只会选择符合条件的第一个元素
var box1=document.querySelector
b) 获取所有元素:querySelectorAll会获取所有复合的标签,返回一个数组
var divs=document.querySelectorAll(‘div.box’);

H5中操作类名的API

	<button>切换</button>
	
	<script>
		var box1=document.querySelector('.box1');
		//box1.className='box box1';
	   //jquery addClass() removeClass() hasClass() toggleClass();
	  // H5 新增的类名的方式和jq一样好用
	var box1=document.querySelector('.box1');

	//添加类名
	 box1.classList.add('active');
	//alert('ok');
	//删除类名
	//box1.classList.remove('active');
	//判断是否包含某个类名
	var f=box1.classList.contains('active');
	console.log(f);
	//切换类名
	document.querySelector('button').function(){
		document.querySelector('.box3').classList.toggle('active');
	}
	</script>
</body>