如何将主体的背景颜色更改为线性渐变颜色

Question

我写了一段代码，将body元素的背景色更改为三种颜色的随机线性渐变组合，这很有效，但我认为这不是一种专业的方法，因为每次按下按钮都会在html层次结构中添加一个样式元素。。

JS的代码是：

const foo = new Array(255);
const sheet = document.styleSheets;
const hText = document.getElementsByClassName('.heading__el');
const btn = document.getElementById('btn');
const color = document.querySelector('.color');
btn.addEventListener("click", function(){ 
let tiltDeg = 0;
let turningAngle1 = 0;
let turningAngle2 = 35;
let turningAngle3 = 100;
let opacity = 1;
let sheet = document.createElement('style');
sheet.innerHTML = `body { background: linear-gradient(${tiltDeg}deg, rgba(${getRandomNumber()}, ${getRandomNumber()}, ${getRandomNumber()}, ${opacity}) ${turningAngle1}%, 
rgba(${getRandomNumber()}, ${getRandomNumber()}, ${getRandomNumber()}, ${opacity}) ${turningAngle2}%, rgba(${getRandomNumber()}, ${getRandomNumber()}, ${getRandomNumber()}, ${opacity}) ${turningAngle3}%) !important}`;
document.body.appendChild(sheet);
color.textContent = (`(${tiltDeg}deg, rgba(${getRandomNumber()}, ${getRandomNumber()}, ${getRandomNumber()}, ${opacity}) ${turningAngle1}%, 
rgba(${getRandomNumber()}, ${getRandomNumber()}, ${getRandomNumber()}, ${opacity}) ${turningAngle2}%, rgba(${getRandomNumber()}, ${getRandomNumber()}, ${getRandomNumber()}, ${opacity}) ${turningAngle3}%)`)
color.style.fontSize = "0.5em";
});```


function getRandomNumber() { 
return Math.floor(Math.random() * foo.length);
}

Answer 1

您可以简单地获取文档的主体元素，然后更改其样式，如下所示：

document.body.style.background = `linear-gradient(${tiltDeg}deg, rgba(${getRandomNumber()}, ${getRandomNumber()}, ${getRandomNumber()}, ${opacity}) ${turningAngle1}%, rgba(${getRandomNumber()}, ${getRandomNumber()}, ${getRandomNumber()}, ${opacity}) ${turningAngle2}%, rgba(${getRandomNumber()}, ${getRandomNumber()}, ${getRandomNumber()}, ${opacity}) ${turningAngle3}%)`;