如何使用 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