第十一章:JavaScript基础--类的操作

当通过style属性来修改元素的样式的时候,每修改一个样式,浏览器就需要重新渲染一次页面,这样的执行的性能是比较差的,而且这种形式当我们要修改多个样式时,也不太方便。因此我们可以采用通过JS的类的操作来进行修改。这样性能比较好,并且这种方式,可以使表现和行为进一步的分离。

一:向其中添加一个class属性值

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

二:判断一个元素是否含有class属性

			
			  判断一个元素中是否含有指定的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);
				
			}
			

三:删除一个元素中的某个属性

		
			  删除一个元素中的指定的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);
				}
				
			}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值