给不支持classList的浏览器（ie9以及以下等）的元素添加classList属性

271486017

于 2016-12-27 10:49:46 发布

阅读量1w

点赞数 5

本文提供了一种兼容老浏览器的 classList 实现方案，通过 Object.defineProperty 为 HTMLElement 原型添加 classList 属性，支持 add、remove、toggle 和 contains 等方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
                }
            };
        }
    });
}