javascript - 加载时随机更改 div 渐变背景

Question

所以我想做的是有几个具有相同类名的 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)];
}

标签： javascriptcsslinear-gradients

Answer 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;
}

<div class="cardGradient"></div>