Question

这段代码有效，但我怎样才能使div只改变颜色而不是整个身体？

var color = function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

setInterval(function() { 
    document.body.style.backgroundColor = color(); //() to execute the function!
}, 1000);

div {
  font-family: cursive;
  font-size: 3em;
  text-align: center;
  width: full;
  height: 100px;
}

<div></div>

Answer 1

您需要能够在DOM中查询正确的元素。一种非常简单的方法是使用document.querySelector使用CSS选择器样式语法来查找DOM中的元素。使用它，您的代码将如下所示。

var color = function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

setInterval(function() { 
    document.querySelector('div').style.backgroundColor = color(); //() to execute the function!
}, 1000);

div {
  font-family: cursive;
  font-size: 3em;
  text-align: center;
  width: full;
  height: 100px;
}

<div></div>

但这只是查询DOM的一种方式。您可以使用document.getElementsByTagName检索具有匹配标记的每个元素的集合。

var divs = document.getElementsByTagName('div');
// Change the first one
divs[0].style.backgroundColor = color();

您还可以为div提供ID并使用document.getElementById：

<div id="coloredDiv"></div>

-

document.getElementById('coloredDiv').style.backgroundColor = color();

有很多方法可以查询DOM，只需使用最适合您情况的方法。

Answer 2

你可以为div分配一个id，并通过getElementById访问它来设置它的颜色

<script>
  var color = function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

setInterval(function() { 
    document.getElementById("mydiv").style.backgroundColor = color(); //() to execute the function!
}, 1000);
  </script>

div {
  font-family: cursive;
  font-size: 3em;
  text-align: center;
  width: full;
  height: 100px;
}

<body>
  <div id="mydiv"></div>
</body

如何改变div的颜色？

2 个答案: