将背景颜色设置为范围输入的值答案

【问题标题】：Set background color to value of range input [closed]将背景颜色设置为范围输入的值
【发布时间】：2013-02-09 15:13:50
【问题描述】：

这是我的代码：

<input id="red" name="red" type="range" min="0" max="255" step="1" value="128></input>
<label for="red">red</label>
<br>
<input id="green" name="green" type="range" min="0" max="255" step="1" value="128"></input>
<label for="green">green</label>
<br>
<input id="blue" name="blue" type="range" min="0" max="255" step="1" value="128"></input>
<label for="blue">blue</label>

如何使用 JavaScript 根据范围 (RGB) 的值设置（html 正文的）背景颜色？

【问题讨论】：

标签： javascript colors range background-color rgb

【解决方案1】：

您想要做的是在您的输入中添加一个 onchange 部分，以便在用户更改输入滑块的值时进行处理。这就是它的样子：

<input id="red" name="red" type="range" min="0" max="255" step="1" value="128" onchange="changeColor()"></input>
<label for="red">red</label>
<br>
<input id="green" name="green" type="range" min="0" max="255" step="1" value="128" onchange="changeColor()"></input>
<label for="green">green</label>
<br>
<input id="blue" name="blue" type="range" min="0" max="255" step="1" value="128" onchange="changeColor()"></input>
<label for="blue">blue</label>

现在你想创建一个真正改变背景颜色的函数：

function changeColor(){
    var red = document.getElementById("red").value;
    var green = document.getElementById("green").value;
    var blue = document.getElementById("blue").value;
    document.body.style.background = "rgb(" + red + "," + green + "," + blue + ")";
}

【讨论】：