循环执行此函数，为什么获取的值没有被累加

Question

想要通过不断执行定时器，改变元素的opacity,但是只函数每次获取的元素的opacity都是0，没有被累加；代码如下：
function appear() {

   var opity = document.getElementById('fade-obj').style.opacity;  
   console.log(document.getElementById('fade-obj').style.opacity);    
    if(opity != 1) {   
        document.getElementById('fade-btn').disabled = 'true';          
        opity += 0.2;
        document.getElementById('fade-obj').style.opacity = opity;
        setTimeout(appear,500);
    }else{
        document.getElementById('fade-btn').innerHTML = '淡出';
        document.getElementById('fade-btn').removeAttribute('disabled');
    }
}
document.getElementById('fade-btn').addEventListener('click', function() {
      if (document.getElementById('fade-btn').innerHTML == '淡入') {
        setTimeout(appear,500);
    }
}, false)

结果如下：

不知道为什么document.getElementById('fade-obj').style.opacity的值不变

Answer 1

var opity = document.getElementById('fade-obj').style.opacity
这里取到的值是字符串类型的
后面你再去 += 就变成了 0.20.2

Answer 2

var opity = document.getElementById('fade-obj').style.opacity;
//opity '0.2'
opity += 0.2; // '0.20.2'
document.getElementById('fade-obj').style.opacity = opity;
document.getElementById('fade-obj').style.opacity // 0.2

字符串的加号运算一定要注意！！

Answer 3

其实你自己可以调试看看的，比别人直接给你答案印象深刻