Question

我正在尝试使用div中嵌入的滑块来更改此div。

<div data-role="content" class = "main" id = "main">
    <div data-role="fieldcontain" data-controltype="slider" class="redSlider">      
        <label for="red" color="red">
            Red
        </label>
        <input id="red" type="range" name="redSlider" value="255" min="0" max="255"
        data-highlight="true" data-mini="true" onchange = "changeBackground()">
    </div>
    <div data-role="fieldcontain" data-controltype="slider" class="greenSlider">
        <label for="green">
            Green
        </label>
        <input id="green" type="range" name="greenSlider" value="255" min="0"
        max="255" data-highlight="true" data-mini="true" onchange = "changeBackground()">
    </div>
    <div data-role="fieldcontain" data-controltype="slider" class="blueSlider">
        <label for="blue">
            Blue
        </label>
        <input id="blue" type="range" name="blueSlider" value="255" min="0" max="255"
        data-highlight="true" data-mini="true" onchange = "changeBackground()">
    </div>

</div>

我的功能如下。我是javascript的新手，但我相信我的错误在于函数本身。

<SCRIPT LANGUAGE="JavaScript">
    function changeBackground () {
        var r = parseInt(document.getElementById('redSlider').value);
            g = parseInt(document.getElementById('greenSlider').value);
            b = parseInt(document.getElementById('blueSlider').value);

        var rHex = (r < 16) ? "0" + r.toString(16) : r.toString(16);
            gHex = (g < 16) ? "0" + g.toString(16) : g.toString(16);
            bHex = (b < 16) ? "0" + b.toString(16) : b.toString(16);

        var hexCode = '#' + rHex + gHex + bHex;

    document.getElementById('main').background-color= hexCode;
}   
</SCRIPT>

Answer 1

代码有很多错误。

background-color对JS无效。您应该使用backgroundColor

当元素ID为redSlider时，您正在引用ID为red的元素。 redSlider是元素的名称。

toString不接受任何参数。您要构建的是rgb频谱，而不是十六进制代码。当值大于9时，十六进制代码包含字母。您需要更多计算才能以这种方式生成十六进制值。

我为你创造了一个工作代码的小提琴。 http://jsfiddle.net/4o7aes29/

尝试使用滑块更改div背景颜色

1 个答案: