加载时随机更改 div 渐变背景答案

【问题标题】：Randomly change div gradient backgrounds on load加载时随机更改 div 渐变背景
【发布时间】：2021-06-02 19:50:02
【问题描述】：

所以我想做的是让一些具有相同类名的 div 在加载时更改渐变背景。我已经设法做到了这一点，但有颜色。如何让它改变渐变？所以代替“红色”，我想要linear-gradient(to right, #1565C0, #b92b27)

let colors = [
    'red',
    'blue',
    'green',
    'teal', 
    'tan',
    'plum'
];
let boxes = document.querySelectorAll(".cardGradient");

for (i = 0; i < boxes.length; i++) {
    boxes[i].style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
}

【问题讨论】：

标签： javascript css linear-gradients

【解决方案1】：

let colors = [
    ['red', 'blue'],
    ['green', 'teal'],
    ['tan', 'plum']
];
let boxes = document.querySelectorAll(".cardGradient");

for (i = 0; i < boxes.length; i++) {
    colorIndex = colors[Math.floor(Math.random() * colors.length)];

    boxes[i].style.background = 'linear-gradient(to right, '+colorIndex[0]+', '+colorIndex[1]+')';
}

.cardGradient {
    height: 50px;
}

&lt;div class="cardGradient"&gt;&lt;/div&gt;

【讨论】：

@HookedHangman 然后接受这个答案作为您问题的解决方案。

【解决方案2】：

使用与纯色背景相同的逻辑，这可以通过类似的方式实现：-

let colors1 = [
    'red',
    'blue',
    'green',
    'teal', 
    'tan',
    'plum'
];

let colors2 = [
    'red',
    'blue',
    'green',
    'teal', 
    'tan',
    'plum'
];
let boxes = document.querySelectorAll(".cardGradient");

for (let i = 0; i < boxes.length; i++) {
    boxes[i].style.backgroundImage = `linear-gradient(to right, ${colors1[Math.floor(Math.random() * colors1.length)]}, ${colors2[Math.floor(Math.random() * colors2.length)]} )`;
}

.cardGradient{
width:100px;
height:100px;
}

<div class='cardGradient'></div>
<div class='cardGradient'></div>
<div class='cardGradient'></div>
<div class='cardGradient'></div>
<div class='cardGradient'></div>
<div class='cardGradient'></div>

【讨论】：