HTML5 JavaScript中新增的操作类名的方法

最新推荐文章于 2022-08-02 21:59:38 发布

houyanhua1

最新推荐文章于 2022-08-02 21:59:38 发布

阅读量964

点赞数 1

分类专栏： HTML5 JavaScript 文章标签： html5 javascript

本文链接：https://blog.csdn.net/houyanhua1/article/details/79630292

版权

JavaScript 同时被 2 个专栏收录

140 篇文章 4 订阅

订阅专栏

HTML5

55 篇文章 1 订阅

订阅专栏

demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<style>
		.box {
			width: 300px;
			height: 100px;
			margin: 10px auto;
			border: 1px solid #000;
		}
		.active {
			border-radius: 50%;
			background-color: red;
		}
	</style>

</head>
<body>
	<div class="box box1"></div>
	<div class="box box2"></div>
	<div class="box box3"></div>
	<div class="box box4"></div>

	<script>
		var box1 = document.querySelector(".box1");
		//box1.className="box active";  //传统修改类名的方式
		//JQuery中操作类名的方式:  addClass() removeClass() hasClass() toggleClass();
		
		//HTML5中新增的操作类名的方式和JQuery的方式一样好用
		box1.classList.add("active");  //添加类名
		box1.classList.remove("active");  //删除类名
		var f = box1.classList.contains("active");  //判断是否包含类名,返回布尔类型。
		box1.classList.toggle("active");  //有就删除，没有就添加类名。

	</script>
</body>
</html>

houyanhua1

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5 JavaScript中新增的操作类名的方法

demo.html：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; .box { width: 300px;
复制链接

扫一扫

专栏目录