H5中操作类名的API

最新推荐文章于 2022-12-09 21:18:28 发布

zuo_zuo_blog

最新推荐文章于 2022-12-09 21:18:28 发布

阅读量497

点赞数

CC 4.0 BY-SA版权

分类专栏： H5/CSS3 文章标签：ＡＰＩ

本文链接：https://blog.youkuaiyun.com/zuo_zuo_blog/article/details/88861489

H5/CSS3 专栏收录该内容

21 篇文章

订阅专栏

１．ＡＰＩ
a) box.classList.add(‘类名’):添加类名
b) box.classList.remove(‘类名’):删除类名
c) box.classList.contains(‘类名’)：是否包含该类名
d) box.claaList.toggle(‘类名’)：切换
２．获取元素
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>