How to change complex CSS node attributes with javascript?

Question

Have this CSS code:

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

Need to change the transition-duration on runtime, and of course, keep the !important flag.

Read many articles here with code examples, but couldn't get any one of them to work, maybe b/c of the nested CSS class structure.

appreciate the tip !

Would be a perfect job for [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) if you are ok using a [polyfill for older browsers](https://stackoverflow.com/questions/46429937/ie11-does-a-polyfill-script-exist-for-css-variables)... — Kaiido, Sep 05 '18 at 01:37
Whoever wrote that CSS should not be allowed anywhere near a computer. — ESR, Sep 05 '18 at 02:08

score 1 · Answer 1 · answered Sep 05 '18 at 00:55

1

Using jQuery you can update css properties using the .css function. You can then set a variable to any time you like to change the transition timing:

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

answered Sep 05 '18 at 00:55

Pixelomo

6,373
4
47
57

But why using `jQuery` for this basic issue ? – ThS Sep 05 '18 at 00:58
@ths because it's easy to use and I'm guessing that avner is new to coding, if you have a vanilla JS solution please add it :) – Pixelomo Sep 05 '18 at 00:59
2

Yes no doubt jQuery is easier. But to load the hole library for this task is an issue itself. Speed matters sometimes. – ThS Sep 05 '18 at 01:00
yep totally agree, personally I stopped using jQuery almost entirely since learning Vanilla JS and React. But when I started coding Vanilla JS was daunting and jQuery was easier to grasp. Worrying about optimization and speed is something that is more of a concern for middle-weight & senior devs – Pixelomo Sep 05 '18 at 01:02
1

Any developer should worry about speed and optimisation. Did you see what happens behind the scene of jQuery's syntax ? We should worry about optimisation. Thanks for your time ! – ThS Sep 05 '18 at 01:08
yes they should but remember when you were first learning JS, the main thing that mattered was understanding how to do something, whether or not the way you did it slowed down your website was less important than whether it got the job done. I think jQuery is a great way to start learning JS even if it can end up being a crutch, – Pixelomo Sep 05 '18 at 01:18
I totally respect your opinion, but, for me when I was (and still) learning `JavaScript` I tried to understand any letter I write and `jQuery` attracted me, not for the reason that made the life easier but when I saw its source code it was mind blowing, so I tried to learn more about `JavaScript` to learn how can I make something like `jQuery`. Newer `JavaScript` developers think of `jQuery` as it's independent from `JavaScript` they may even think that it's another language and that's all due to the fact that we want to do less work with easier tasks and that's what `jQuery` is... – ThS Sep 05 '18 at 01:25

Cristyan · Answer 2 · 2018-09-05T01:06:59.707

1

you can use document.querySelectorAll(".class1, .class2, class3");, then you can iterate over the nodeList

const nodeList = document.querySelectorAll(".class1, .class2, class3");

nodeList.forEach((el)=>{ el.style.transitionDuration = '5s' })

edited Sep 05 '18 at 01:06

answered Sep 05 '18 at 01:01

Cristyan

650
4
15

1

`el.style.transitionTime` doesn't exist. You probably meant `el.style.transitionDuration`. – ThS Sep 05 '18 at 01:05
1

awesome solution, tiny thing but you might have to add ```!important``` to the string since that's in the CSS – Pixelomo Sep 05 '18 at 01:19

How to change complex CSS node attributes with javascript?

2 Answers2