美文网首页
原生javascript实现classList的代码

原生javascript实现classList的代码

作者: MakingChoice | 来源:发表于2016-04-06 09:26 被阅读118次

    看到一个原生JS实现classList的代码,分享一下。

    (function(document) {//实现classList
        if (!("classList" in document.documentElement) && Object.defineProperty && typeof HTMLElement !== 'undefined') {
    
            Object.defineProperty(HTMLElement.prototype, 'classList', {
                get: function() {
                    var self = this;
                    function update(fn) {
                        return function(value) {
                            var classes = self.className.split(/\s+/),
                                    index = classes.indexOf(value);
    
                            fn(classes, index, value);
                            self.className = classes.join(" ");
                        };
                    }
    
                    var ret = {
                        add: update(function(classes, index, value) {
                            ~index || classes.push(value);
                        }),
                        remove: update(function(classes, index) {
                            ~index && classes.splice(index, 1);
                        }),
                        toggle: update(function(classes, index, value) {
                            ~index ? classes.splice(index, 1) : classes.push(value);
                        }),
                        contains: function(value) {
                            return !!~self.className.split(/\s+/).indexOf(value);
                        },
                        item: function(i) {
                            return self.className.split(/\s+/)[i] || null;
                        }
                    };
    
                    Object.defineProperty(ret, 'length', {
                        get: function() {
                            return self.className.split(/\s+/).length;
                        }
                    });
    
                    return ret;
                }
            });
        }
    })(document);
    

    相关文章

      网友评论

          本文标题:原生javascript实现classList的代码

          本文链接:https://www.haomeiwen.com/subject/xazplttx.html