javascript基础（class 类属性的操作（增，删，改，查））（四十五）

最新推荐文章于 2024-03-14 23:11:52 发布

咸鸭蛋炒饭

最新推荐文章于 2024-03-14 23:11:52 发布

阅读量413

点赞数

分类专栏： HTML5基础篇文章标签： html javascript 经验

本文链接：https://blog.csdn.net/u010853130/article/details/55261784

版权

HTML5基础篇专栏收录该内容

121 篇文章 7 订阅

订阅专栏

1.类属性的操作

<!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(){
				
				/*
				 * 点击按钮，修改div的样式
				 */
				
				//获取box1
				var box1 = document.getElementById("box1");
				//为btn01绑定一个单击响应函数
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					
					//修改box1的样式
					/*box1.style.width = "200px";
					box1.style.height = "200px";
					box1.style.backgroundColor = "yellow";*/
					
					/*
					 * 我们可以通过修改元素的class来间接的修改元素的样式，
					 * 	这样我们可以同时修改多个样式，并且提升浏览器渲染页面的性能
					 * 修改class也可以使行为和表现分离，方便后期维护
					 */
					//修改box1的class为b2
					//box1.className += " b2";
					
					//向box1中添加b2这个class
					//addClass(box1 , "b2");
					
					//检查box1中是否含有b2这个class
					//alert(box1.className == "b2") ;
					
					//创建一个正则表达式
					/*var reg = /\bb2\b/;
					alert(reg.test(box1.className));*/
					
					//alert(hasClass(box1,"b3"));
					
					//removeClass(box1,"b2");
					
					toggleClass(box1,"b2");
					
				};
				
			};
			
			
			/*
			 * 定义一个专门用来向元素中添加class的函数
			 * 	参数：
			 * 		obj 要添加class属性的对象
			 * 		cn 要添加的class的属性值
			 */
			function addClass(obj , cn){
				
				//如果元素中有该class则不添加，没有才添加
				if(!hasClass(obj , cn)){
					obj.className += " " + cn;
				}
				
			}
			
			/*
			 * 创建一个函数检查一个元素中是否含有指定的class
			 * 	如果有，则返回true。否则返回false
			 */
			function hasClass(obj , cn){
				
				//创建正则表达式
				var reg = new RegExp("\\b"+cn+"\\b");
				
				//返回检查结果
				return reg.test(obj.className);
			}
			
			/*
			 * 用来从指定元素中删除class值的方法
			 */
			function removeClass(obj , cn){
				
				//要删除一个class，就是将这个class替换为一个空串
				//创建正则表达式
				var reg = new RegExp("\\b"+cn+"\\b" , "g");
				
				//判断obj中是否含有这个class
				
				if(reg.test(obj.className)){
					//将内容替换为空串
					obj.className = obj.className.replace(reg , "");
				}
			}
			
			/*
			 * 用来切换元素的class的方法
			 * 	如果元素中含有该class，则删除
			 * 	如果元素中没有该class，则添加
			 * 
			 */
			function toggleClass(obj , cn){
				//检查obj中是否含有cn
				if(hasClass(obj , cn)){
					//有该class，则删除
					removeClass(obj , cn);
				}else{
					//没有该class，则添加
					addClass(obj , cn);
				}
				
			}
			
		</script>
	</head>
	<body>
		
		<button id="btn01">点我一下</button>
		<br /><br />
		
		<div id="box1" class="b1 b2 b3 b4 b2 b2 b2"></div>
		
	</body>
</html>

咸鸭蛋炒饭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
javascript基础（class 类属性的操作（增，删，改，查））（四十五）

1.类属性的操作 .b1{ width: 100px; height: 100px; background-color: red; } .b2{ width: 200px; height: 200px; background-color: yellow; }
复制链接

扫一扫