马上加入IBC程序猿 各种源码随意下,各种教程随便看! 注册 每日签到 加入编程讨论群

C#教程 ASP.NET教程 C#视频教程程序源码享受不尽 C#技术求助 ASP.NET技术求助

【源码下载】 社群合作 申请版主 程序开发 【远程协助】 每天乐一乐 每日签到 【承接外包项目】 面试-葵花宝典下载

官方一群:

官方二群:

分享原生js仿jq的addClass,removeClass,hasClass的实现方式

[复制链接]
查看3541 | 回复1 | 2017-3-21 23:14:20 | 显示全部楼层 |阅读模式
不多说,直接上代码,本人亲测
[JavaScript] 纯文本查看 复制代码
	  		/**
	  		 * 判断某个dom元素是否有某个类
	  		 * @author cygnet
	  		 * @date   2017-03-21T22:23:08+0800
	  		 * @param  {[type]}                 obj [description]
	  		 * @param  {[type]}                 cls [description]
	  		 * @return {Boolean}                    [description] 包含则返回true
	  		 */
	  		hasClass: function(obj, cls){
	  			// 获取当前元素的所有类名
	  			var _cls = obj.className || obj.class;
	  			// 通过空格把字符串分割成数组  ps: 正则表达式 \s 匹配空格
	  			var _cls_arr = _cls.split(/\s+/);
	  			// 循环遍历数组
	  			for(var i = 0; i<_cls_arr.length; i++){
	  				// 如果包含,则返回true
	  				if(_cls_arr[i] == cls) return true;
	  			}
	  			return false;
	  		},

	  		/**
	  		 * 元素上移除某个类名
	  		 * @author cygnet
	  		 * @date   2017-03-21T22:29:05+0800
	  		 * @param  {[object]}     obj [dom元素]
	  		 * @param  {[string]}     cls [类名]
	  		 * @return {[type]}           [description]
	  		 */
	  		removeClass: function(obj, cls){
	  			if(this.hasClass(obj, cls)){ 
	  			  obj.className = obj.className.replace( new RegExp( "(\\s|^)" + cls + "(\\s|$)" )," " ); 
	  			 }
	  		},


	  		/**
	  		 * 给dom元素增加类
	  		 * @author cygnet
	  		 * @date   2017-03-21T22:21:03+0800
	  		 * @param  {[object]}   obj [dom元素] 
	  		 * @param  {[string]}   cls [类名]
	  		 */
	  		addClass: function(obj, cls){
	  			// 获取当前元素的类名
	  			var _cls = obj.className || obj.class;
	  			// 当前元素如果类,则空格复制给变量
	  			var _space = (_cls != '') ? ' ' : '';
	  			// 拼接类名
	  			var _addcls = _cls + _space + cls;
	  			// 替换原来的class
	  			obj.className = _addcls;
	  		}


ibcadmin | 2017-3-22 08:36:46 | 显示全部楼层
+111
C#论坛 www.ibcibc.com IBC编程社区
C#
C#论坛
IBC编程社区
*滑块验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则