下面是JQuery对元素class操作的简单实现,请看代码:
添加class:
//增加class function addClass(elem,value) { var classes, cur, clazz, j, finalValue // 如果参数是多个样式设置"a b c"按照/S+g空格分割 classes = (value || "").match(/S+/g) || []; //如果是元素节点,并且有class属性 //拼接成 " a b c "形式,加上前后空格 cur = elem.nodeType === 1 && (elem.className ? (" " + elem.className + " ").replace(/[ f]/g, " ") : " " ); //如果存在样式 if (cur) { j = 0; while ((clazz = classes[j++])) { //查找下是否不是有重复的,没有就叠加 if (cur.indexOf(" " + clazz + " ") < 0) { cur += clazz + " "; } } // 去掉前后的空格 finalValue = jQuery.trim(cur); if (elem.className !== finalValue) { //赋值 elem.className = finalValue; } } }
移除class:
//移除样式 function removeClass(elem, value) { var classes, cur, clazz, j, finalValue // 如果参数是多个样式设置"a b c"按照/S+g空格分割 classes = (value || "").match(/S+/g) || []; //如果是元素节点,并且有class属性 //拼接成 " a b c "形式,加上前后空格 cur = elem.nodeType === 1 && (elem.className ? (" " + elem.className + " ").replace(/[ f]/g, " ") : " " ); //如果存在样式 if (cur) { j = 0; while ((clazz = classes[j++])) { //与addClass的区别在这里 while (cur.indexOf(" " + clazz + " ") >= 0) { cur = cur.replace(" " + clazz + " ", " "); } } // 去掉前后的空格 finalValue = jQuery.trim(cur); if (elem.className !== finalValue) { //赋值 elem.className = finalValue; } } }
其实原理就是通过元素原生className属性获得元素class值(一串字符),然后对这串字符进行各种奇淫技巧拼接,最后再赋值到元素的className属性。