更改 `setInterval` 中元素的背景颜色答案

【问题标题】：Change the background color of an element inside `setInterval`更改 `setInterval` 中元素的背景颜色
【发布时间】：2017-03-15 18:45:02
【问题描述】：

我正在尝试通过使用document.getElementById("h1").style 并使其成为产生随机颜色的变量，每 300 毫秒更改一次 <h1> 元素的颜色，但它似乎不起作用。

这是我的代码：

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}
var newColor = getRandomColor();
function color() {
    document.getElementById("h1").style = "backgroundColor = " + newColor;
    setTimeout(color(), 300)
}

【问题讨论】：

标签： javascript html css random

【解决方案1】：

几点建议：

您不能使用标签名称 (h1) 作为 getElementById 的参数，除非您在 HTML 中设置一个（我建议重命名）；
你需要使用element.style.backgroundColor = newColor来更新CSS样式；
当您将函数传递给setTimeout 时，您需要省略color() 后面的括号（否则您将传递该函数的返回值）；
你应该在你的颜色函数中调用getRandomColor，这样你每次都会得到不同的颜色；

编辑：您可以使用 JavaScript 的本机十六进制字符串转换大大缩短您的 getRandomColor 函数：number.toString(16)

演示片段：

function getRandomColor () {
  return '#' + (
    '000000' + (Math.random() * 0x1000000).toString(16)
  ).slice(-6)
}

function color (heading) {
  heading.style.backgroundColor = getRandomColor()
}

setInterval(color, 300, document.getElementById('heading'))

&lt;h1 id="heading"&gt;Heading&lt;/h1&gt;

【讨论】：

【解决方案2】：

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

(function color() {
    document.getElementById("myH1").style.backgroundColor = getRandomColor();
    
    //if you want to query element by tag name
    //document.getElementsByTagName("h1")[0].style.backgroundColor = getRandomColor();
    setTimeout(color, 300)
})();

#myH1{
 transition:all 0.3s ease;
}

&lt;h1 id="myH1"&gt;test&lt;/h1&gt;

【讨论】：

【解决方案3】：

改变

document.getElementById("h1").style = "backgroundColor = " + newColor;

到

document.getElementById("h1").style.backgroundColor = + newColor;

此代码未经测试，但backgroundColor 是样式属性，因此它应该是style.backgroundColor 而不是style = backgroundColor。

编辑

正如另一个答案所提到的，h1 不能是 getElementById 的属性，所以给你的 h1 一个 Id 或使用不同的方法选择它。

【讨论】：

【解决方案4】：

function getRandomColor() {
   var letters = '0123456789ABCDEF';
   var color = '#';
   for (var i = 0; i < 6; i++ ) {
      color += letters[Math.floor(Math.random() * 16)];
   }
   return color;
}

setInterval(function() {
   document.getElementsByTagName('h1')[0].style.backgroundColor = getRandomColor();
}, 300)

【讨论】：