JS---基础_类的操作

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

chen_zan_yu_

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

阅读量172

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/chen_zan_yu_/article/details/99714936

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.b1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			.b2{
				width: 200px;
				height: 200px;
				background-color: yellow;
			}
		</style>
		<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";*/
					//一行代码修改所有样式
					
					//修改box的class属性
					/*
					 * 我们可以通过修改元素的class属性来间接的修改样式
					 * 这样一来，我们只需要修改一次，即可同时修改多个样式
					 * 浏览器只要重新渲染页面一次，性能比较高
					 * 并且这样的方式，可以使表现和行为进一步分离
					 */
					/*box.className = "b2";*/
					/*addClass(box,"b2");*/
					/*alert(hasClass(box,"b2"));*/
					/*removeClass(box,"b2");*/
					toggleClass(box,"b2");
				};
			};
			
			//定义一个函数，用来向一个元素重添加指定的class属性值
			/*
			 * 参数：
			 * obj需要添加class的属性的元素
			 * cn要添加的class值
			 */
			function addClass(obj,cn){
				//检查obj中是否有cn
				if(!hasClass(obj,cn)){
					obj.className +=" "+cn;
				}
			}
			
			/*
			 * 判断一个元素中是否含有指定的class属性值
			 * 参数：
			 * obj需要添加class的属性的元素
			 * cn要添加的class值
			 */
			function hasClass(obj,cn){
				//判断obj中是否有cn class
				//创建一个正则表达式
				/*var reg = /\bb2\b/;*/
				var reg = new RegExp("\\b"+cn+"\\b");
				/*alert(reg);*/
				
				return reg.test(obj.className);
				/*return obj.className == cn;*/
			}
			/*
			 * 删除一个元素中的指定的class属性
			 */
			function removeClass(obj,cn){
				//创建一个正则表达式
				var reg = new RegExp("\\b"+cn+"\\b");
				
				//删除class
				obj.className = obj.className.replace(reg,"");
			}
			/*
			 *toggleClass可以用来切换一个类
			 * 如果元素中具有该类，则删除
			 * 如果元素中没有该类，则添加
			 */
			function toggleClass(obj,cn){
				
				//判断obj中是否含有cn
				if(hasClass(obj,cn)){
					//有，则删除
					removeClass(obj,cn);
				}else{
					//没有，则添加
					addClass(obj,cn);
				}
				
			}
		</script>
	</head>
	<body>
		<button id="btn01">点击按钮以后修改box的样式</button>
		<div id="box" class="b1 b2">
			
		</div>
	</body>
</html>