纯JavaScript的addClass和removeClass模拟

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

我这个是针对类做扩展  如果你只是要方法  CL.fn. 换成 var 就能用了;或者你换成你的类做拓展

    /**
     * 给节点添加className
     */
    CL.fn.addClass = function(elem, str) {
        if (elem.className == str) return this;
        if (elem.className.indexOf(str+' ') > -1) return this;
        if (elem.className.indexOf(' '+str) > -1) return this;
        str = (elem.className == '')?str:' '+str;
        elem.className += str;
        return this;
    };
    
    /**
     * 移除节点的className
     */
    CL.fn.removeClass = function(elem, str) {
        if (elem.className == str) {
            elem.className = '';
        } 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,'');
        }
        return this;
    };

【使用方法】

例如:

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

chumo.jpg

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

相关阅读

留言评论

暂无留言

精品域名

出售精品域名 Yumi.La ¥5000.00