JS基础-类的操作-尚硅谷-P137_尚硅谷js类的操作-CSDN博客

本文链接：https://blog.csdn.net/qq_43624193/article/details/122781893

视频链接：
视频

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		.b1{
			width: 100px;
			height: 100px;
			background-color: #000000;
		}
		.b2{
			
			height: 200px;
			background-color: #ADFF2F;
		}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				var box=document.getElementById("box");
				var btn=document.getElementById("btn");
				btn.onclick=function(){
					//alert("?");
					/**
					 * 通过style属性修改样式，每修改一个样式，浏览器就要重新渲染页面，这样执行的性能是比较差的
					 * 而且这种形式当我们修改多个样式时 不太方便
					 */
					// box.style.width='500px';
					// box.style.height='500px';
					// box.style.backgroundColor="red";
					/**
					 * 可以通过修改元素属性来间接修改样式 浏览器只需要渲染一次
					 * 表现和行为分离
					 * 这样一来 我们只需要修改一次便可以修改多个样式
					 */
					// box.className+=" b2";
					
					// if(!hasClass(box,"b2")){
					// 	addClass(box,"b2");
					// }
					//removeClass(box,"b2");
					toggleClass(box,"b2");
					//alert(hasClass(box,"b2"));
				}
			}
			/**
			 * 定义一个函数 用来向一个元素中添加指定的class属性值
			 * 参数
			 * 1.obj：要添加class的属性的元素
			 * 2.cn:要添加的class值
			 * 
			 */
			function addClass(obj,cn){
				obj.className += " "+cn;
			}
			/**
			 * 判断一个函数中是否含有指定的class值
			 * 参数：
			 * obj：
			 * cn
			 * 返回值：true false
			 */
			function hasClass(obj,cn){
				var reg=new RegExp("\\b"+cn+"\\b");
				return reg.test(obj.className);
				
			}
			/**
			 * removeClass()
			 */
			function removeClass(obj,cn){
				// 创建一个正则表达式
				var reg=new RegExp("\\b"+cn+"\\b");
				obj.className=obj.className.replace(reg,"");
			}
			/**
			 * toggleClass()
			 * 切换类
			 * 
			 */
			function toggleClass(obj,cn){
				if(hasClass(obj,cn)){
					removeClass(obj,cn);
				}else{
					addClass(obj,cn);
				}
			}
		</script>
	</head>
	<body>
		<button id="btn">这是一个按钮</button>
		<br />
		<br />
		<div class="b1 b2" id="box"></div>
	</body>
</html>