javascript - 在 CSS 中使用 JavaScript 变量

Question

我这里有一些 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 中的 var x 一样。我怎么做？我想我不能这样做:

<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>

Answer 1

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

document.getElementById('myEl').style.animation = 'fading' + x + 's infinite');

或者如果你想将它应用到具有该类的每个元素:

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