如何从数组中给div一个随机的背景色？
提问于 2018-08-27 07:11:40
我想给我的div一个随机的背景色，我有一个(‘红’，‘绿’，‘蓝’，'#f00‘)颜色数组，我想要作为我的div背景色，但我不知道如何在每次渲染这个div时在我的div中随机显示它们？
回答 3
Stack Overflow用户
发布于 2018-08-27 07:23:38
使用javascript rand()函数，你也可以在没有jQuery的情况下使用它。
getNewRandomColor();
function getNewRandomColor()
{
var myArray = ['red', 'green', 'blue'];
var rand = myArray[Math.floor(Math.random() * myArray.length)];
document.getElementById("myDiv").style.backgroundColor = rand;
}<div id="myDiv">Something here</div>
<button onclick="getNewRandomColor()">Get New Random Color</button>
您还可以将更多的颜色应用于数组，以获得更随机的颜色。
Stack Overflow用户
发布于 2018-08-27 07:20:34
以下是在每次加载页面时更改div颜色的示例代码
$(document).ready(function(){
var colors = ['red','blue','green','yellow','cyan','orange'];
var new_color = colors[Math.floor(Math.random()*colors.length)];
$('#color-div').css('background-color',new_color);
});它所做的是使用Math函数从数组中选择一个随机颜色，并将其应用于div
Fiddle在这里
Stack Overflow用户
发布于 2018-08-27 07:31:53
使用background-color和普通JS更改style.backgroundColor属性：
const COLORS = [
'red',
'green',
'blue',
'yellow',
'cyan',
'black',
];
document.onclick = () => {
document.body.style.backgroundColor
= COLORS[Math.floor(Math.random() * COLORS.length)];
};
相同，但使用CSS变量：
const COLORS = [
'red',
'green',
'blue',
'yellow',
'cyan',
'black',
];
document.onclick = () => {
document.body.style.setProperty('--bg', COLORS[Math.floor(Math.random() * COLORS.length)]);
};:root {
--bg: white;
}
body {
background-color: var(--bg);
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52034279
复制相关文章
点击加载更多
腾讯云开发者
