将背景色设置为范围输入的值 [英] Set background color to value of range input

问题描述

这是我的代码:

<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正文的)背景颜色?

How can I set the background color (of html body) according to the values of the ranges (RGB) using JavaScript?

推荐答案

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

What you want to do is add an onchange part to your inputs to handle when the user changes the values of your input sliders. This is what it would look like:

<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>

现在，您要创建一个实际上会改变背景颜色的函数:

Now you want to make a function that will actually change the background color:

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 + ")";
}

这篇关于将背景色设置为范围输入的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！