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

【问题标题】：how do i change a css property after a time interval of 3 seconds using javascript?如何使用 javascript 在 3 秒的时间间隔后更改 css 属性？
【发布时间】：2020-07-09 14:02:12
【问题描述】：

这是我一直在使用的 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; 
}

'''

【问题讨论】：

这段代码是在标签下面还是在标签上面？我问你的代码在实际呈现标记之前运行的原因，使用 jQuery 文档就绪事件并设置 CSS
这些是单独文件中的两个单独代码
没关系，如果你在<body>标签的末尾包含<script>标签，那么它将被最后渲染，如果你使用jQuery，它会在完整文档时触发一个函数已准备好进行编程
无论如何，我在下面给出了答案，我希望它应该工作

标签： javascript html css animation settimeout

【解决方案1】：

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

【讨论】：

请不要只发布代码作为答案，还要说明您的代码的作用以及它如何解决问题的问题。带有解释的答案通常质量更高，更有可能吸引投票。

【解决方案2】：

根据文档Mozilla Developer Network

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

所以技术上getElementsByClassName 总是返回一个数组
您需要使用数组索引来访问元素
样式属性也是驼峰式animationPlayState
在你的代码中都是小写的

试试这个代码

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

纯粹使用 CSS 来启动和停止动画你可以试试

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

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

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

【讨论】：

你能给我html标签吗？我将创建一个jsfiddle
来聊天——chat.stackoverflow.com
我知道它返回一个数组，但这里该类名中只有一个元素......我们假设它默认将其作为单个元素。跨度>
这就是为什么我把 run[0] 设为零，它会为 undefined 抛出错误吗？
在 google chrome 控制台中，您可以直接输入 javascript 来检查特定元素是否出现

【解决方案3】：

据我所知：

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

你正面临这个 p.b: Javascript document.getElementsByClassName returning undefined

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

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

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

【讨论】：