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 if you are ok using a polyfill for older browsers... — Kaiido
– Kaiido, Commented Sep 5, 2018 at 1:37
Whoever wrote that CSS should not be allowed anywhere near a computer. — ESR
– ESR, Commented Sep 5, 2018 at 2:08

Pixelomo · Accepted Answer · 2018-09-05 00:55:40Z

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 5, 2018 at 0:55

Pixelomo

6,8354 gold badges49 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

ThS Over a year ago

But why using jQuery for this basic issue ?

Pixelomo Over a year ago

@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 :)

ThS Over a year ago

Yes no doubt jQuery is easier. But to load the hole library for this task is an issue itself. Speed matters sometimes.

Pixelomo Over a year ago

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

ThS Over a year ago

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 !

|

Cristyan · Accepted Answer · 2018-09-05 01:06:59Z

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 5, 2018 at 1:06

answered Sep 5, 2018 at 1:01

Cristyan

6704 silver badges15 bronze badges

2 Comments

ThS Over a year ago

el.style.transitionTime doesn't exist. You probably meant el.style.transitionDuration.

Pixelomo Over a year ago

awesome solution, tiny thing but you might have to add !important to the string since that's in the CSS

Collectives™ on Stack Overflow

How to change complex CSS node attributes with javascript?

2 Answers 2

7 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related