Javascript element.style.opacity 未定义。为什么？

Question

我正在尝试制作一个闪烁元素的 JS 函数。我使用 setInterval() 进行计时，但它给出了错误消息 Uncaught TypeError: Cannot read property 'opacity' of undefined.

当我尝试不使用计时器修改不透明度，而是 "by hand" 时，它起作用了...

我做错了什么？

用法：

document.getElementById('idOfTheElement').startFlicker();

函数：

Element.prototype.startFlicker = function() {
    var blinkInterval = setInterval(function() {
        if (parseInt(this.style.opacity) === 0) {
            this.style.opacity = 1;
        } else {
            this.style.opacity = 0;
        }
    }, 50);
};

Answer 1

试试这个

Element.prototype.startFlicker = function() {
    var self = this;

    var blinkInterval = setInterval(function() {
        if (parseInt(self.style.opacity) === 0) {
            self.style.opacity = 1;
        } else {
            self.style.opacity = 0;
        }
    }, 50);
};

在setInterval中this引用window，你需要在变量中存储上下文（this - 当前元素）并在setInterval中使用

Answer 2

因为语境。 setInterval里面的this.style指的是全局window对象。

Answer 3

您始终可以引用元素本身，因为在 setInterval 函数中，window 对象作为 this.

传递

相反，您应该 .bind() 试一试。所以 this 将是对方法参数的引用。

Element.prototype.startFlicker = function() {
    var blinkInterval = setInterval(function() {
        if (parseInt(this.style.opacity) === 0) {
            this.style.opacity = 1;
        } else {
            this.style.opacity = 0;
        }
    }.bind(this), 50);
};

Javascript element.style.opacity 未定义。为什么？

Javascript element.style.opacity is undefined. Why?

javascript

element

opacity

setinterval