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

根据文档Mozilla Developer Network

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

所以技术上getElementsByClassName总是返回一个数组

您需要使用数组索引来访问元素

另外样式属性animationPlayState

在您的代码中是驼峰式大小写都是小写字母

试试这个代码

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

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

.logo {

  animation-play-state: paused; 

}

.logo:hover {

  animation-play-state: running;

}

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

Answer 2

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




Answer 3

据我所知：

DOM 还没有准备好让浏览器 API 告诉 JavaScript 更多信息。窗口 setTimeout 在 DOM 准备好之前执行（在 window.onload 之前）。

你正面临这个 pb： Javascript document.getElementsByClassName 返回 undefined

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

window.addEventListener("load", function() 

{

    // code here

});

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