为什么边框被应用和删除？

Question

我给了一个div的边框，但如果我设置了边框，它会自动删除，为什么？

PD：我知道如果我在函数的最后一次调用中设置边框它会起作用，但我想知道为什么会发生这种情况。

var padding = 0, e = document.getElementById("box");
function box(){
 if(padding < 80) { padding ++;
 e.setAttribute("style","padding:"+padding+"px");
 setTimeout(()=>{box();},50);
 }
 if(padding%7 === 0) { // 
 e.style.border = "2px solid purple";
 }
}
window.addEventListener("DOMContentLoaded",box);

#box {
width: 50px;height:50px;background-color:pink;
}

<div id="box">

Answer 1

e.setAttribute("style","...")会覆盖您在其他位置设置的style.border（因为它会完全重置style）。

您应该只使用style.* = "..."。

或者，更好的是，改为使用CSS动画。