纯JS实现jQuery的addClass和removeClass功能

jQuery不能用或者jQuery没法及时使用的时候,有需要操作节点的className,就可以用这些代码了。

【2017/11/24 修改版】

var addClass = function(elem, str) {
    if (elem.className == str) return
    if (elem.className.indexOf(str+' ') > -1) return
    if (elem.className.indexOf(' '+str) > -1) return  
    str = (elem.className == '')?str:' '+str
    elem.className += str
    elem.className = elem.className.replace(/\s{2,}/g, ' ')
}
    
var removeClass = function(elem, str) {
    if (elem.className == str) {
        elem.removeAttribute('class')
        return
    } else if (elem.className.indexOf(str+' ') > -1) {
        elem.className = elem.className.replace(str+' ','')
    } else if (elem.className.indexOf(' '+str) > -1) {
        elem.className = elem.className.replace(' '+str,'')
    }
    elem.className = elem.className.replace(/\s{2,}/g, ' ')
}

【使用方法】

例如:

addClass(document.querySelector('.hello-world'), 'demo')
removeClass(document.querySelector('.hello-world'), 'hello-world')


阅读: 586
js
在同意共创许可协议(CC BY-NC-SA-4.0)的前提下,您可以转载本文。
橙色阳光
https://oss.so/article/89

相关阅读

留言评论

暂无留言
关于各种NPM问题,推荐使用Yarn,安装速度快,没用各种奇葩的错误,方便快捷。
收集的NodeJS代码片段: NodeJS Tools

最新留言

  • soshine 在《ZBlogPHP外链插件免费送!独家免费插件!》中留言
    很好的插件,如果能更自动化一点就好了,自动将淘宝客外链转换成对应的文章ID形式。
  • 橙色阳光 在《纯Javascript实现淡入淡出效果》中留言
    讲真,我现在的淡入淡出都是用css3+setTimeout了,用这个方案也是当年的一些想法。
  • 橙色阳光 在《基于jQuery的简易幻灯插件 - OsSliderJS》中留言
    讲真,这段JS大家不要看了……
  • BeautifulDays 在《三年了,我依然还在》中留言
    兴趣变工作,工作成为一种乐趣。这也蛮好的啊,工作之余可以在优化自己的博客,在博客上分享自己的一些心得、知识,毕竟,博客,现在已经越来越多的被今日头条,新浪微博,腾讯微博、微信公众号等第三方自营体APP取代了。能坚持下去的真不容易。给你一个赞!
  • 柒柒 在《移动端Touch事件preventDefault以后影响click事件触发的不科学解决方案》中留言
    先赞再说
  • 大谋 在《Chrome内核对css中rem大小单位文本font-size处理BUG参考解决方案》中留言
    还是你这里好看