需要使用Javascript修改css动画的帮助（无jQuery）

我有下面的文件，我正试图执行，但是，我永远无法让它工作

你好 @关键帧动画{ 0% { 左：0px； 顶部：0px； } 25% { 左：200px； 顶部：0px； } 50% { 左：200px； 顶部：200px； } 75% { 左：0px； 顶部：200px； } 100% { 左：0px； 顶部：0px； } } 你好 点击 功能A{ var css=@keyframes anim{0%{left:0px；top:0px；}25%{left:200px；top:+Math.random+px；}50%{left:200px；top:200px；}75%{left:0px；top:200px；}100%{left:0px；top:0px；} document.getElementById1.innerHTML=css }

---

在css中设置变量，如下所示：

<style> 
  :root {
         --anim-top: 0px;
        }
    @keyframes anim {
            0% {
                left: 0px;
                top: 0px;
            }
            25% {
                left: 200px;
                top: var(--anim-top);
            }
            50% {
                left: 200px;
                top: 200px;
            }
            75% {
                left: 0px;
                top: 200px;
            }
            100% {
                left: 0px;
                top: 0px;
            }
        }
</style>

并在javascript中更改该变量的值，如下所示：

<script>
     document.body.style.setProperty('--anim-top',Math.random()+'px');
</script>

---

请不要对我投反对票，因为我对stack overflow和Javascript都是新手，有人能帮我解决这个问题吗。哪件事？你需要补充更多细节。你想要实现什么？什么对您有效？Math.random返回一个介于0和1之间的值。也许你所需要的只是一个因素。如本例所示：请解释您想要实现的目标。您可以进一步解释，为什么是document.body，而不是document.head等。Hi@phenolicdeath标记仅适用于syntex，它的内容在文档加载时首先加载，而writen样式应用于文档体元素。这就是我们应该使用document.body来更改css变量的值的方法，这称为less css