Javascript 通过JS更改CSS变量

我试图通过单击事件更改关键帧的值

我目前拥有的是以下代码：

:root {
  --background-positionI: 0;
}
body{
  --background-positionF: 0;
}

.firstPanel-R{
    animation: animatedBackground 3s;
    -webkit-animation-fill-mode: forwards;
}

@keyframes animatedBackground {
    0% { 
      background-position: var(--background-positionI), 0;
    }
    100% { 
      background-position: var(--background-positionF), 0;
    }
}

我在Root和Body处设置变量，然后尝试通过下一个clickEvent更改它们：

arrowRight.addEventListener("click", function(){
    ++clickTargetCounter;

    backgroundImg.classList.add("firstPanel-R");

    finalPositionBackground = clickTargetCounter * -2037;
    initialPositionBackground = finalPositionBackground - -2037 + 'px';

    root.style.setProperty("--background-positionF", clickTargetCounter * -2037 + 'px', 0)
    body.style.setProperty("--background-positionI", finalPositionBackground - -2037 + 'px', 0)
});

---

由于某些原因，CSS变量保持在0，并且不会更新到单击事件中设置的值。

您应该将

px

之后的

移动到

0

-->

clickTargetCounter*-2037+'px，0'

哦，我真是个笨蛋，但是现在变量更新了，但关键帧没有移动

，

：背景位置不需要逗号值