如何使用 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 NetworkgetElementsByClassNameDocument 接口的方法返回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)