[js进阶]原生js实现addClass,removeClass,hasClass方法

addClass

function addClass(obj, cls){//获取 class 内容.var obj_class = obj.className,//判断获取到的 class 是否为空, 如果不为空在前面加个'空格'.blank = (obj_class != '') ? ' ' : '';added = obj_class + blank + cls;//组合原来的 class 和需要添加的 class.obj.className = added;//替换原来的 class.
}

removeClass

function removeClass(obj, cls) {//获取 class 内容, 并在首尾各加一个空格. ex) 'abc    bcd' -> ' abc    bcd 'let obj_class = ' ' + obj.className + ' ';//将多余的空字符替换成一个空格. ex) ' abc    bcd ' -> ' abc bcd 'obj_class = obj_class.replace(/(\s+)/gi, ' '); //在原来的 class 替换掉首尾加了空格的 class. ex) ' abc bcd ' -> 'bcd 'let removed = obj_class.replace(' ' + cls + ' ', ' ');//去掉首尾空格. ex) 'bcd ' -> 'bcd'removed = removed.replace(/(^\s+)|(\s+$)/g, '');//替换原来的 class.obj.className = removed;
}

hasClass

function hasClass(obj, cls) {let obj_class = obj.className;//获取 class 内容.let obj_class_lst = obj_class.split(/\s+/);//通过split空字符将cls转换成数组.let x = 0;for (x in obj_class_lst) {if (obj_class_lst[x] === cls) {//循环数组, 判断是否包含clsreturn true;}}return false;
}

[js进阶]原生js实现addClass,removeClass,hasClass方法相关推荐

原生js实现addClass,removeClass,hasClass方法
第一部分:原生js实现addClass,removeClass,hasClass方法 function hasClass(elem, cls) {cls = cls || '';if (cls.rep ...
jQuery对类的操作.addClass()/.removeClass()/.hasClass()方法
.addClass():给DOM元素添加类名,间接控制样式 .removeClass():移除DOM元素的样式 .hasClass():判断DOM元素是否有某类名 [例]代码功能:点击换肤.原理:设置 ...
js进阶 9-14 js如何实现下拉列表多选移除
js进阶 9-14 js如何实现下拉列表多选移除一.总结一句话总结: 1.js如何实现下拉列表多选移除? 把这个下拉列表中的option移除,然后加到另外一个下拉列表(文字)中去.remove方法 ...
js进阶 9-5 js如何确认form的提交和重置按钮
js进阶 9-5 js如何确认form的提交和重置按钮一.总结一句话总结: 1.这个并不好做:onsubmit 里面的代码必须返回false才能取消onsubmit方法的执行,所以,有return ...
JS：原生JS实现message消息提示框
简介学习了一下如何使用原生JS(加上class类)实现message消息提示框的封装(繁琐版). 使用到的主要技术点:class类,JS. 功能点 1.四种提示状态(message success ...
原生js获取html元素属性,JS（原生js和jq方式）获取元素属性（自定义属性），删除属性（自定义属性）...
JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性二.设置元素的属性三.删除元素的属性一.获取元素的属性 1-原生JS 获取属性 .ge ...
React.js实现原生js拖拽效果及思考
一.起因&思路不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
JS进阶篇--JS数组reduce()方法详解及高级技巧
基本概念 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被 ...
JS进阶篇--JS数组reduce()方法详解及高级技巧 1
基本概念 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被 ...

[js进阶]原生js实现addClass,removeClass,hasClass方法

addClass

removeClass

hasClass

[js进阶]原生js实现addClass,removeClass,hasClass方法相关推荐

最新文章

热门文章