javascript - 为什么我节点的样式只会减少不会增加？

Question

我在网站上工作，我正在尝试以编程方式使对象淡入淡出。
然而，当我运行我的循环时，它只从对象中减去不透明度，当我尝试添加到不透明度时，它在整个 100 次循环中保持在 0.01，但是当它运行 100-199 时，它每次都减去 0.01。
我很困惑为什么它这样做......

function searched() {
    var count = 0;
    if (srched) {
        return
    } else {

        let runloop = setInterval(function () {
            if (count <= 99) {
                document.getElementById("done").style.opacity += 0.01;
            } else if (count > 99 && count <= 199) {
                document.getElementById("done").style.opacity -= 0.01;
            } else {
                clearInterval(this)
                srched = false;
            }
            count += 1;
        }, 40)

    }

}

html代码是:

<p id = "done" style="opacity: 0; color: #1a5b02;">

循环没有问题，只是增加了不透明度。

Answer 1

问题是 += 也可以表示串联，所以 opacity 属性得到的值是 '0' + '0.01' = '00.01' 一个值循环中的第一次，它被更正为 0.01，但是在下一次迭代中你得到了 '0.010.01'，这是一个错误。

-= 没有问题 - 它不能是字符串操作，所以它只是做减法。

解决方案:确保不要错误地进行串联。我认为最短的解决方案是编写 ...opacity -= -0.01; 但我很好奇是否有更短的 ;)