如何在js过程中为div操纵样式？

Question

只是经过几个循环，然后为给定的DIV显示不同的值，但是此DIV的样式无法动态设置，是吗？ 如何解决？ Fyi，样式部分，我也为此DIV设置了它。 但是一旦值更改，样式就消失了（通过“样式”部分设置的样式不再有效）。 谢谢。

var i = 60;                     //  set your counter to 60

function myLoop () {           //  create a loop function
   setTimeout(function () {    //  call a 3s setTimeout when the loop is called
    if (i < 100) {
        i += 10;                   //  increment the counter by 10
        console.log(i);
// document.getElementById('score').style = "margin: 0; position: absolute; top: 50%; margin-right: -50%; font-size: 216px; transform: translate(-50%, -50%);color: red;";
        document.getElementById('score').innerHTML = i; 
         myLoop();             //  ..  again which will trigger another 
     } 
   }, 3000)

}

Answer 1

element.style是指样式属性对象（ https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style ），而不是属性。 尝试

document.getElementById('score').setAttribute("style", 
"margin: 0; position: absolute; top: 50%; margin-right: -50%; font-size: 216px; transform: translate(-50%, -50%);color: red;");