经常用到的小工具函数,每次用到都重写一遍,有点浪费体力,于是决定分阶段整理下,需要用到的时候就直接拷过来用了~
对于dom节点的className,常用操作不外乎增、删、查(改可以用增+删事先),由于代码比较简单,直接上源码+接口注释
/** * @description 给节点添加类 * @param {DOMObject} node dom节点 * @param {String} className 即将添加的类名 */ function addClass(node, className){ var addClassName = trim(className); var oriClassName = node.className; if(oriClassName.indexOf(addClassName)===-1){ node.className = oriClassName+ ' ' +className; } } /** * @description 删除节点某个类 * @param {DOMObject} node dom节点 * @param {String} className 即将删除的类名 */ function removeClass(node, className){ var reg = new RegExp('\\b'+ trim(className) +'\\b', 'g'); node.className = node.className.replace(reg, ''); } /** * @description 判断节点是否具有某个类 * @param {DOMObject} node dom节点 * @param {String} className 查询的类名 * @return {Boolean} true-有,false-没有 */ function hasClass(node, className){ return node.className.indexOf(trim(className))!==-1; } /** * @description 删除字符串首尾空格 * @param {String} str 原始字符串 * @return {String} 删除了首位空格后的字符串 * @example trim(' hello world ') === 'hello world' */ function trim(str){ return str.replace(/^\s+/, '').replace(/\s+$/, ''); }
其他如同时添加多个类、同时删除多个类等,实现原理类似,不赘述