Question

我使用了colorPicker，想要取值并设置它。

我用过这个：

 <li id="color"><input type="color" name="color" onchange="changeColor()"></li>

function changeColor(){
    var selectedShapes = document.getElementsByClassName("selected");
    var len = selectedShapes.length;
    for(var i=0; i<len; ++i)
    {
        selectedShapes[i].style.background = document.getElementsByName("color");
    }
}

这是文件： http://jsbin.com/mebiriruzi/edit?css,js,output

如何使用用户的颜色输入？

Answer 1

getElementsByName方法返回一个包含与名称匹配的所有元素的数组。即使只有一个元素与名称匹配，仍然会返回一个数组，因此要从该数组中获取第一个项目，您应该在地址元素0（第一个）中包含括号表示法。由于这将返回DOM节点，因此您需要获取返回元素的value属性：

document.getElementsByName("color")[0].value

Answer 2

document.getElementsByName("color")返回getElementsByName中“s”建议的元素列表。您可以使用ID，然后执行document.getElementById("color").value或选择第一次出现“color”，如果您只有document.getElementsByName("color")[0].value

所以你可以这样做：

function changeColor(){
    var selectedShapes = document.getElementsByClassName("selected");
    var len = selectedShapes.length;
    for(var i=0; i<len; ++i)
    {
        selectedShapes[i].style.background = document.getElementsByName("color")[0].value;
    }
}

或

<li id="color"><input type="color" id="mySelectedColor" name="color" onchange="changeColor()"></li>

然后在js：

function changeColor(){
    var selectedShapes = document.getElementsByClassName("selected");
    var len = selectedShapes.length;
    for(var i=0; i<len; ++i)
    {
        selectedShapes[i].style.background = document.getElementById("mySelectedColor").value;
    }
}

根据颜色输入类型更改形状的颜色javesctipt

2 个答案: