时间戳

首页 > 解决方案 > 如何将主体的背景颜色更改为线性渐变颜色

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

问题描述

我编写了一个代码，将 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);
}

标签： javascriptcss

解决方案

您可以简单地获取文档的正文元素，然后像这样更改其样式：

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}%)`;

推荐阅读