如何使颜色选择器默认为 CSS 变量？

Question

我正在编写一个颜色选择器。我试图弄清楚如何使其默认为 CSS 变量，然后让它更改有问题的 CSS 变量。该变量称为

--bg

，用于更改背景颜色。

我尝试使用

value="var(--bg)"

，但没有用。然后我尝试了 ChatGPT 生成的 JavaScript 代码：

document.addEventListener('DOMContentLoaded', function() {
    const colorPicker = document.getElementById('bgcolor');
    colorPicker.value = getComputedStyle(document.documentElement).getPropertyValue('--bg').trim();

    colorPicker.addEventListener('input', function() {
        document.documentElement.style.setProperty('--bg', this.value);
    });
});

还是什么都没有。

Answer 1

您可以在不使用变量的情况下更改背景颜色：

document.addEventListener('DOMContentLoaded', function() {
    const colorPicker = document.getElementById('bgcolor');

    colorPicker.oninput = function() {
        document.body.style.backgroundColor = colorPicker.value;
    };
});

我改变了另一件事，这不是“colorPicker.input”而是“colorPicker.oninput”。

然后我只需使用颜色选择器的值设置背景颜色。