在CSS中使用JavaScript变量

我这里有一些JavaScript：

<script>
    function random(n) {
        return ((Math.floor(Math.random() * Math.floor(n)))+1);
    }


var x = random(5000)+2000;
</script>

我还有一些CSS：

<style>


.fadingVariable{animation:fading 7s infinite}@keyframes fading{0%{opacity:0}20%{opacity:1}50%{opacity:1}80%{opacity:1}100%{opacity:0}}


</style>

CSS基本上是每7秒淡入淡出一个图像。我希望时间单位是可变的，就像JavaScript中的VARx一样。我该怎么做？我想我不能只做：

<style>


.fadingVariable{animation:fading 'x's infinite}@keyframes fading{0%{opacity:0}20%{opacity:1}50%{opacity:1}80%{opacity:1}100%{opacity:0}}


</style>

---

您不能在CSS中真正设置变量，但可以使用JS将样式直接应用于元素：

document.getElementById'myEl'.style.animation='facing'+x+'s infinite'

或者，如果要将其应用于该类的每个元素：

document.getElementsByClassName('fadingVariable').forEach(el => {
    el.style.animation = 'fading ' + x + 's infinite';
});

---

您可以使用javascript设置duration属性，使用css设置其余属性，如下所示： javascript代码：

var x = 7;
document.getElementById('fadingVariable').style.animationDuration = x + 's';

css代码：

.fadingVariable{animation:fading infinite}@keyframes fading{0%{opacity:0}20%{opacity:1}50%{opacity:1}80%{opacity:1}100%{opacity:0}}

注意，在css代码中去掉了duration属性。

---

希望这能对你有所帮助。

如果你在写这篇文章的时候不太关心IE，你可以看看新的

---

否则，像SASS或SCSS这样的CSS预处理器可以让您轻松设置这些变量，以便编译为CSS。

谢谢您的回复。我不太明白如何实施你的建议。我想它应该放在我的脚本中，但我该如何使用它呢？这是我的尝试：document.getElementsByClassName'carouselTwo'。forEachel=>{el.style.animation='facing'+3+'s infinite'；}；如果carouselTwo是您要将动画应用到的元素类，并且是的，这应该是脚本的一部分，那么应该这样做。请记住，如果您的脚本位于HTML的头部，并且在加载dom之前启动了该脚本，那么它将无法找到元素。要么在正文末尾的脚本中执行此操作，要么只在DOMContentLoaded上启动此操作。谢谢，它几乎可以工作了。图像在随机时间切换，但淡入淡出时间保持在7秒，导致一些图像无法正常淡出。有些图像会持续5秒，这比淡入时间短，这意味着它们会正确淡入，但会在淡出之前消失。如何在脚本中随机化淡入淡出时间和变量x？请看LESS或SCS。它就像CSS一样，但是有函数和变量

:root {
    --fade-interval: 7s;
}

.fadingVariable {
    animation: fading var(--fade-interval) infinite
}
@keyframes fading {
    0% { opacity: 0 }
    20% { opacity: 1 }
    50% { opacity: 1 }
    80% { opacity: 1 }
    100% { opacity: 0 }
}