Javascript 使用颜色选择器更改屏幕上形状的颜色，而无需重新加载页面_Javascript_Color Picker

Javascript 使用颜色选择器更改屏幕上形状的颜色，而无需重新加载页面

javascript

Javascript 使用颜色选择器更改屏幕上形状的颜色，而无需重新加载页面,javascript,color-picker,Javascript,Color Picker,我正在用D3开发一个javascript程序。我已将形状加载到浏览器中。现在我想通过让用户从颜色选择器中选择颜色来更改该形状的颜色。这个问题有没有纯JS的解决方案？这段代码应该可以用 <head> <style> #shape{ border:1px solid; width:50px; height:50px; } </style>

我正在用D3开发一个javascript程序。我已将形状加载到浏览器中。现在我想通过让用户从颜色选择器中选择颜色来更改该形状的颜色。这个问题有没有纯JS的解决方案？

这段代码应该可以用

<head>
    <style>
        #shape{
            border:1px solid;
            width:50px;
            height:50px;
        }
    </style>
    <script>
        function update(){
            var shape = document.getElementById("shape")
            var col = document.getElementById("col")
            shape.style.backgroundColor = col.value
        }
        document.addEventListener("input",function(e){
            if(e.target.id == "col"){
                update()
            }
        });
    </script>
</head>
<body>
    <input type = "color" id = "col" />
    <div id = "shape"></div>
</body>

我会把它分解为：

1使用click事件处理程序D3或jQuery或纯JavaScript读取颜色值

2将颜色值指定给使用.attr或.style绘制的形状

希望这把简单的小提琴能符合你的意图：

注意，这与通常的输入/更新/退出模式不同。

上述答案的方法稍有修改。希望这能帮助您：

在该功能中，您可以使用选择器设置颜色

完整代码：