CSS change id with class in javascript

Question

I wonder how to change style in javascript if i have css like this:

      #div_frame_text.show {
        -webkit-animation: TextinBottom 300ms ease both;
        animation: TextinBottom 300ms ease both;
      }

      #div_frame_text.hide {
        -webkit-animation: TextoutBottom 700ms ease both;
        animation: TextoutBottom 700ms ease both;
      }

i want to change animation and -webkit-animation with another animation. i have to tried change with code like this:

document.getElementById('div_frame_text').classList.contains('show').style['-webkit-animation'] = "Textin 300ms ease both"
document.getElementById('div_frame_text').classList.contains('show').style['animation'] = "Textin 300ms ease both"

is that possible?

Answer 1

Code below returns true

document.getElementById('div_frame_text').classList.contains('show')

if you add on true.style['animation'] = "Textin 300ms ease both"

it will give error animation is undefined You're basically give style to true not to the element Cache the element into a variable and make a check if has show then inside the check add the stlyles;

Example:

const frameText = document.getElementById('div_frame_text');
if (frameText.classList.contains('show')) {
    frameText.style.animation = "newanimation 300ms ease both";
}

My Advice to you console.log everything and if you have to use twice element selector put in a variable, if you have two times almost equal functionality create function with parameters for the elements and props that differs