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’);
<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>