需要帮助设置CSS属性以等于变量[关闭]

Question

我正在创建一个随机颜色生成器，并以这样的方式制作它，您可以选择它生成的一般颜色（这就是 redLowerLimit、greenUpperLimit 等的原因......）

我遇到的问题只是获取 getColor() 函数中生成的随机 RGB 颜色并将其应用于 colorBox 背景颜色。我将其设置为在按钮单击事件上运行，并且每次单击时它都会生成新的随机颜色，它根本不会将该随机颜色应用于背景颜色。

我知道问题出在 css 中的 colorChange() 函数和/或 #colorBox 中。我尝试了各种突变，但均成功率为零，甚至 ChatGPT 也说我的代码应该可以正常运行。

我尝试在changeColor()函数中使用setProperty()方法，但它似乎只适用于特定的颜色字符串，例如.style.setProperty('background-color', 'blue')有效，但.style.setProperty （'背景颜色'，变量）不起作用。

下面是相关的CSS代码。

#colorBox {
    /*--color: red;
    background-color: var(--color);*/

    height: 300px;
    width: 300px;
    z-index: 5;
}

下面是相关的js代码。

let redUpperLimit = 255;
let greenUpperLimit = 255;
let blueUpperLimit = 255;

let redLowerLimit = 0;
let greenLowerLimit = 0;
let blueLowerLimit = 0;

let randomRed = 0;
let randomGreen = 0;
let randomBlue = 0;



const newColorBtn = document.getElementById('newColorBtn');
newColorBtn.addEventListener("click", changeColor);





function getRed(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
};

function getGreen(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
};

function getBlue(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
};




function getColor() {
    randomRed = getRed(redLowerLimit, redUpperLimit);
    randomGreen = getGreen(greenLowerLimit, greenUpperLimit);
    randomBlue = getBlue(blueLowerLimit, blueUpperLimit);
    
    return `rgb(${randomRed},${randomGreen},${randomBlue});`;
};


function changeColor() {
    const changeColorBox = document.getElementById('colorBox');

    const randomRGB = getColor(); // Get a new random RGB color

    console.log("New color:", randomRGB); // Log the new color value
    
    changeColorBox.style.backgroundColor = randomRGB; // Set the background color of the colorBox
    
    console.log("Background color:", changeColorBox.style.backgroundColor); // Log the background color of the element
    
    console.log("Computed color:", getComputedStyle(changeColorBox).backgroundColor);
}



/*
function changeColor() {
    let newColor = `${randomRGB}`;

    const changeColorBox = document.getElementById('colorBox');
    
    changeColorBox.style.setProperty('background-color', newColor);

    console.log(newColor);
}
*/

Answer 1

您的

getColor()

函数错误地返回以分号结尾的字符串。删除它：

let redUpperLimit = 255;
let greenUpperLimit = 255;
let blueUpperLimit = 255;

let redLowerLimit = 0;
let greenLowerLimit = 0;
let blueLowerLimit = 0;

let randomRed = 0;
let randomGreen = 0;
let randomBlue = 0;

const newColorBtn = document.getElementById('newColorBtn');
newColorBtn.addEventListener("click", changeColor);

function getRed(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function getGreen(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function getBlue(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function getColor() {
    randomRed = getRed(redLowerLimit, redUpperLimit);
    randomGreen = getGreen(greenLowerLimit, greenUpperLimit);
    randomBlue = getBlue(blueLowerLimit, blueUpperLimit);
    
    return `rgb(${randomRed}, ${randomGreen}, ${randomBlue})`;
}

function changeColor() {
    const changeColorBox = document.getElementById('colorBox');

    const randomRGB = getColor(); // Get a new random RGB color

    console.log("New color:", randomRGB); // Log the new color value
    
    changeColorBox.style.backgroundColor = randomRGB; // Set the background color of the colorBox
    
    console.log("Background color:", changeColorBox.style.backgroundColor); // Log the background color of the element
    
    console.log("Computed color:", getComputedStyle(changeColorBox).backgroundColor);
}

#colorBox {
    height: 300px;
    width: 300px;
    z-index: 5;
}

<div id="colorBox">The color box</div>

<button id="newColorBtn" type="button">New color</button>