Javascript element.style.opacity未定義。爲什麼？

Question

我想讓一個JS函數閃爍一個元素。我使用setInterval()進行計時，但它給出了錯誤消息Uncaught TypeError: Cannot read property 'opacity' of undefined。

當我嘗試修改不透明度不具有定時，而是「手」，即工程...

我在做什麼錯？

用法：

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

在setIntervalthis指window，您需要在變量中使用商店上下文（this - 當前元素）並在setInterval中使用

Answer 2

由於上下文。 this.style裏面的setInterval是指全局的window對象。

Answer 3

您始終可以對元素本身進行引用，因爲在setInterval函數內部，窗口對象被傳遞爲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); 
};