如何动态更改CSS秒值

2ledvvac 于 2022-11-27 发布在其他

关注(0)|答案(1)|浏览(129)

第一个
我尝试弄清楚如何动态地改变CSS动画持续时间的秒值。我在类中静态地将该值设置为20 s。我希望能够从JavaScript中将20 s更改为某个动态值，例如，60 s。我使用JS中的值来执行其他迭代，因此我需要它是JS中的整数。我认为问题是，我使用的是不同的数据类型整数与秒，但我不确定。
我尝试过几种不同的方法，但都不奏效：
1.更改CSS整数变量--sec：20，然后使用calc（0 s + var（--sec））计算动画持续时间。
1.更改CSS秒变量--sec：20 s，通过连接（60 + 's'）并使用var（--sec）作为动画持续时间，从JS中获得。
1.正在修改文件。getElementsByClassName（'class'）[0].style.animationDuration值，方法是串连（60 + 's'）
如有任何建议，我们将不胜感激...

css

来源：https://stackoverflow.com/questions/74513993/how-to-dynamically-change-a-css-seconds-value

1条答案

按热度按时间

2uluyalo1#

更新最新发布的代码

CSS变量似乎不是在:root {}中定义的，而是在* {}中定义的，因此setProperty()不起作用。
如果您将它们移到:root {}，它应该可以正常工作：

:root {
  --timer-seconds: 5s;
  --box-size: 150px;
  --border-width: 8px;
}

有关自定义工期输入的更新

您也可以在CSS中将ms设置为animation-duration的值。
More about animation-duration
下面是一个过于简化的示例，它通过更改动画元素上的变量--duration将ms中的值设置为animation-duration。
还有很多其他的方法，但这似乎是直截了当的。
希望这会有所帮助。
第一个

赞(0）回复(0）举报 2022-11-27

我来回答

如何动态更改CSS秒值

1条答案

相关问题

热门标签

最新问答