javascript - 如何使用 javascript 更改复杂的 CSS 节点属性？

Question

有这个 CSS 代码:

 <style>
.odometer{font-size: 180px; line-height: 100px;}
.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner,
.odometer.odometer-theme-minimal.odometer-animating-up .odometer-ribbon-inner,
.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner,
.odometer.odometer-theme-minimal.odometer-animating-down.odometer-animating .odometer-ribbon-inner
{transition-duration: 3s !important}
</style>

需要在运行时更改过渡持续时间，当然还要保留 !important 标志。

在这里阅读了许多带有代码示例的文章，但其中任何一篇都无法正常工作，也许是嵌套 CSS 类结构的 b/c。

感谢提示!

Answer 1

使用 jQuery，您可以使用 .css 函数更新 css 属性。然后，您可以将变量设置为您想要更改转换时间的任何时间:

 var transitionTime = 5s;

 $('.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner,
    .odometer.odometer-theme-minimal.odometer-animating-up .odometer-ribbon-inner,
    .odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-minimal.odometer-animating-down.odometer-animating .odometer-ribbon-inner'
 ).css('transition-duration', transitionTime + 's !important')