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


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>


阅读更多

没有更多推荐了,返回首页