JS操作css类_js控制css创建的类-CSDN博客

本文链接：https://blog.csdn.net/weixin_45561258/article/details/115493342

在这里插入图片描述

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.b1{
				width: 100px;
				height: 100px;
				background-color: red;
			}			
		</style>
	</head>
	<body>
		<button id="btn01">点击按钮以后修改box的样式</button>
		<br /><br />
		<div id="box" class="b1"></div>
	</body>
</html>

1.修改box的样式

<script type="text/javascript">
	window.onload = function(){
		//获取box
		var box = document.getElementById("box");
		//获取btn01
		var btn01 = document.getElementById("btn01");
		
		//为btn01绑定单击响应函数
		btn01.onclick = function(){
			//修改box的样式
			/*
			 * 通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面
			 * 	这样的执行的性能是比较差的，而且这种形式当我们要修改多个样式时，也不太方便
			 */
			box.style.width = "200px";
			box.style.height = "200px";
			box.style.backgroundColor = "yellow";
</script>

2.用一行代码，可以同时修改多个样式：修改box的class属性

box.className += " b2";

通过修改元素的class属性来间接的修改样式，这样一来，我们只需要修改一次，即可同时修改多个样式，浏览器只需要重新渲染页面一次，性能比较好，并且这种方式，可以使表现和行为进一步的分离。
3.定义一个函数，用来向一个元素中添加指定的class属性值

		/*
		 * 参数:
		 * 	obj 要添加class属性的元素
		 *  cn 要添加的class值	
		 */
		function addClass(obj , cn){
			
			//检查obj中是否含有cn
			if(!hasClass(obj , cn)){
				obj.className += " "+cn;
			}
			
		}


 		/*
		 * 判断一个元素中是否含有指定的class属性值
		 * 	如果有该class，则返回true，没有则返回false
		 * 	
		 */
		function hasClass(obj , cn){
			
			//判断obj中有没有cn class
			//创建一个正则表达式
			//var reg = /\bb2\b/;
			var reg = new RegExp("\\b"+cn+"\\b");
			
			return reg.test(obj.className);
			
		}

addClass(box,"b2");

4.删除一个元素中的指定的class属性

function removeClass(obj , cn){
		//创建一个正则表达式
			var reg = new RegExp("\\b"+cn+"\\b");
			
			//删除class
			obj.className = obj.className.replace(reg , "");
			
		}

5.toggleClass可以用来切换一个类

			/*
			 * toggleClass可以用来切换一个类
			 * 	如果元素中具有该类，则删除
			 * 	如果元素中没有该类，则添加
			 */
			function toggleClass(obj , cn){
				
				//判断obj中是否含有cn
				if(hasClass(obj , cn)){
					//有，则删除
					removeClass(obj , cn);
				}else{
					//没有，则添加
					addClass(obj , cn);
				}
				
			}