对css类名className的一些操作的函数
习惯了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是否匹配,如果是则返回true if (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); } }