通过JS更改CSS变量

Question

我正在尝试通过Click事件更改关键帧的值。

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

: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，并且不会更新为click事件中设置的值。