IE 10以前的版本兼容 document element 的classList

最新推荐文章于 2022-11-17 10:42:47 发布

天涯海角

最新推荐文章于 2022-11-17 10:42:47 发布

阅读量5k

点赞数 1

分类专栏： JavaScript 文章标签： IE 10 以前的版本 document element 兼容 classList

本文链接：https://blog.csdn.net/abrahamcheng/article/details/11218319

版权

JavaScript 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

本文讲述如何让　IE 10以前的版本兼容 document element 的classList。

classList是广泛使用的CSS类处理利器，可以：

// div is an object reference to a <div> element with class="foo bar"
div.classList.remove("foo");　//移除该div的foo 类
div.classList.add("anotherclass");　//给该div添加一个

// if visible is set remove it, otherwise add it
div.classList.toggle("visible");　//如果该div包含visible类则移除它，否则给它添加

alert(div.classList.contains("foo"));　//检查当前div是否包含foo类

div.classList.add("foo","bar"); //添加多个CSS 类

但是蛋疼的是IE9和IE9以前的版本不支持该属性，下面这个代码可以弥补这个遗憾：

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