JavaScript基础——87.添加和删除类名【classList.ad 和 classList.remove】

最新推荐文章于 2025-07-04 22:31:46 发布

时间sk

最新推荐文章于 2025-07-04 22:31:46 发布

阅读量870

点赞数 22

CC 4.0 BY-SA版权

分类专栏： Javascript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/weixin_63215361/article/details/146078471

Javascript 专栏收录该内容

118 篇文章

订阅专栏

classList（class类，List表）
classList.add（类表添加函数）
classList.remove（类表删除函数）

1.添加类名,若元素已有相同类名，不会再添加该类名
zxw.classList.add(“zxw2”);
zxw.classList.add(“zxw2”,“zxw3”);

2.删除类名,如果要删除的类名该元素没有，删除也不会出错
zxw.classList.remove(“zxw3”);

背景如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.zxw1{color: black;font-size: 16px;}
			.zxw2{color: red;font-size: 24px;}
			.zxw3{width: 200px;height: 100px;border: 2px solid black;}
		</style>
	</head>
	
	
	
	<body>	
		<div id="wyzxw" class="zxw1" >
			我要自学网
		</div>		
	</body>
</html>

在这里插入图片描述
现在我要给 id="wyzxw"这个标签添原本样式是
（color: black;font-size: 16px;），现在要给该标签添加其他样式，如下样式，又该怎么办呢？
color: red;font-size: 24px;
width: 200px;height: 100px;border: 2px solid black;

可以使用类名添加法：
1.添加类名,已有相同类名，不会添加
zxw.classList.add(“zxw2”);
zxw.classList.add(“zxw2”,“zxw3”);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.zxw1{color: black;font-size: 16px;}
			.zxw2{color: red;font-size: 24px;}
			.zxw3{width: 200px;height: 100px;border: 2px solid black;}
		</style>
	</head>
	<body>
		
		
		<div id="wyzxw" class="zxw1" >------注意
			我要自学网
		</div>
		
		
		
		<script type="text/javascript">
			var zxw = document.getElementById("wyzxw");
//			1.添加类名,已有相同类名，不会添加
	       //zxw.classList.add("zxw2");
			zxw.classList.add("zxw2","zxw3");
			
			
			
			
		</script>
	</body>
</html>

在这里插入图片描述

通过类名删除样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.zxw1{color: black;font-size: 16px;}
			.zxw2{color: red;font-size: 24px;}
			.zxw3{width: 200px;height: 100px;border: 2px solid black;}
		</style>
	</head>
	<body>
		
		
		<div id="wyzxw" class="zxw1 zxw2 zxw3" >------------注意
			我要自学网
		</div>
				
		<script type="text/javascript">
			var zxw = document.getElementById("wyzxw");
//			2.删除类名,如果要删除的类名没有，也不会出错
//			zxw.classList.remove("zxw3");
			zxw.classList.remove("zxw3","zxw2");			
		</script>
	
	</body>
</html>

在这里插入图片描述