如何使用 javascript 在 3 秒的时间间隔后更改 css 属性？

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

据我所知：

DOM 尚未准备好让浏览器 API 告诉 JavaScript 更多信息。Window setTimeout 在 DOM 准备好之前（window.onload 之前）执行。

您面临着这个 pb： Javascript document.getElementsByClassName 返回未定义

我的答案是包装在window.load（或document.ready）中：

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

也考虑准备好文件。 window.onload 与 $(document).ready()

Answer 2

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




Answer 3

getElementsByClassNameDocument 接口的方法返回具有array-like object所有给定类名的所有子元素

所以技术上getElementsByClassName总是返回一个数组
您需要使用数组索引来访问元素
而且样式属性animationPlayState
在代码中是驼峰式大小写，全部都是小写字母

试试这个代码

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

要纯粹使用 CSS 启动动画和停止动画，您可以尝试

.logo {

  animation-play-state: paused; 

}

.logo:hover {

  animation-play-state: running;

}

所以，对于你的情况，你甚至不需要 javascript