как изменить свойство css через 3 секунды, используя javascript?

Question

это код javascript, который я использовал. и я продолжаю получать ошибку

    '''
    cannot set property 'animationplaystate' of undefined.
    '''

    '''
    window.setTimeout(function time(){
      var run=document.getElementsByClassName('logo');
      run.style.animationplaystate='paused';
     }, 3000);
    '''

ниже - стиль элемента

'''
.logo{
color: rgb(0, 158, 150);
float:right;
padding-right:0px;
font-weight: 600;
padding-top:5px;
margin-right: 20px;
font-size: 2em;
padding-left: 30px;
animation-name:logo;
animation-duration: 1.5s;
animation-play-state: running; 
}

'''

Answer 1

Согласно документации Сеть разработчиков Mozilla

Метод getElementsByClassName интерфейса Document возвращает array-like object всех дочерних элементов, которые имеют все заданные имена классов (s)

так технически getElementsByClassName всегда возвращает массив Вам нужно использовать индекс массива для доступа к элементам Также атрибут стиля - верблюжий кейс animationPlayState в вашем коде все строчные буквы

Попробуйте этот код

run[0].style.animationPlayState = 'paused'

Чтобы запустить анимацию и остановить анимацию только с помощью CSS, вы можете попробовать

.logo {
  animation-play-state: paused; 
}

.logo:hover {
  animation-play-state: running;
}

, поэтому для вашего случая вам даже не нужно javascript

Answer 2

Из того, что я знаю:

DOM еще не готов к тому, чтобы API браузера сообщил JavaScript больше. Окно setTimeout выполняется до того, как DOM будет готов (до window.onload).

Вы сталкиваетесь с этим pb: Javascript document.getElementsByClassName, возвращая undefined

мой ответ обернуть в window.load (или document.ready):

window.addEventListener("load", function() 
{
    // code here
});

Считать документ готовым. window.onload vs $ (document) .ready ()

Answer 3

run.style['animation-play-state'] = 'paused';