Question

我想在自定义属性上使用自定义对象扩展HTMLElement接口。这甚至可能吗？

这就是我所拥有的：

if (typeof HTMLElement.prototype.classList === "undefined") {
    HTMLElement.prototype.classList = function ClassList() { return this.className.split(' '); };
    HTMLElement.classList.prototype.add = function(name) {
        if (classList.indexOf(name) !== -1) {
            return;
        }
        classList[classList.length] = name;
        this.className = classList.join(' ');
    };
    HTMLElement.classList.prototype.remove = function(name) {
        var index = classList.indexOf(name);
        if (index !== -1) {
            this.className = classList.splice(index + 1, 1).join(' ');
        }
    }
}

这应该可以让你对我需要的东西有所了解。

我想为IE9实现自己的classList功能。在IE中，这将导致未定义并将引发错误。

element.classList.add('fadeIn');

有没有一种简单的方法来实现它？

修改

我已经玩了一段时间，但是我的知识还不够好，无法准确理解发生了什么。我仍然需要致电document.getElementById('whatever').classList()以避免“未定义”。我希望能够在没有大括号的情况下调用classList（当然，如果浏览器不支持classList）

Answer 1

我认为你把原型设置错了。

您应该将classList分配给HTMLElement.prototype，而不是直接分配到HTMLElement本身。

要像它本地工作那样访问它，你可以这样设置......

HTMLElement.prototype.classList = function()
  // ...
};

HTMLElement.prototype.classList.add = function()
  // ...
};

HTMLElement.prototype.classList.remove = function()
  // ...
};

Answer 2

要定义getter（可以在没有括号的情况下调用的函数），请使用Object.defineProperty。适用于IE9。

function getClassList()
{
    var element = this;
    var classList = this.className.split(' ');
    classList.add = function(name) {
        if (classList.indexOf(name) !== -1) {
            return;
        }
        classList.push(name);
        element.className = classList.join(' ');
    };
    classList.remove = function(name) {
        var index = classList.indexOf(name);
        if (index !== -1) {
            classList.splice(index, 1);
            element.className = classList.join(' ');
        }
    };
    return classList;
}

Object.defineProperty(HTMLElement.prototype, 'classList', { get: getClassList });

使用类

2 个答案: