在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';
});

Answer 2

您可以使用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属性。 希望对您有帮助。

Answer 3

如果您不太在意IE（在撰写本文时），则可以研究新的CSS Variables 。

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

否则，像SASS或SCSS这样的CSS预处理器将使您可以轻松设置此类变量，以将其编译为CSS。