习惯了jQuery已经写好的针对class的操作,最近看书也看到了针对className的操作,但书上的没有仔细地针对各个情况进行处理,于是自己就动手写了,进行了初步的测试,暂没发现问题。如果有问题请留言
//清除结尾和开头处的空白符
if (!String.trim) {String.prototype.trim = function () {return this.replace(/^\s+|\s+$/g, '');};
}/*** 取得包含元素className的数组* @param {Node} element*/function getClassName(element) {if (!(element = $(element))) {return false;}return element.className.replace(/\s+/g, ' ').split(' ');}/*** 检察院苏中是否存在某个className* @param {Node} element* @param {String} className* @return {Boolean}*/function hasClassName(element, className) {if (!(element = $(element))) {return false;}var classes = getClassName(element);for (var i = 0; i < classes.length; i++) {//检测className是否匹配,如果是则返回trueif (classes[i] === className) {return true;}}return false;}/*** 为元素添加className* @param element* @param className* @return {Boolean}*/function addClassName(element, className) {if (!(element = $(element))) {return false;}//将className添加到当前className的末尾//如果没有className,则不包含空格element.className += (element.className ? ' ' : '') + className;return true;}/*** 删除一个或多个类名* @param element* @param className* @return {Boolean}*/function removeClassName(element, className) {if (!(element = $(element))) {return false;}className = (className || '').trim().replace(/\s+/g, ' ');if (className === '') {//未定义或者空的情况为删除所有类名element.className = '';} else if (className.indexOf(' ') !== -1) {//对多个以空格为分隔的类名进行处理,然后迭代var classarr = className.split(' ');for (var i = 0; i < classarr.length; i++) {arguments.callee(element, classarr[i]);}} else {//对单个类名的处理className = (' ' + className + ' ');elemClass = ' ' + element.className + ' ';if (elemClass.indexOf(className !== -1)) {element.className = elemClass.replace(className, ' ').replace(/\s+/g, ' ').trim();} else {return false;}}}/*** 切换类名* @param element* @param className*/function toggleClassName(element, className) {if (!hasClassName(element, className)) {addClassName(element, className);} else {removeClassName(element, className);}}