在不重新加载页面的情况下使用颜色选择器更改屏幕上形状的颜色

Question

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

Answer 1

此代码应该有效

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

Answer 2

我将其分解为：

1) 使用单击事件处理程序（D3 或jQuery，或纯JavaScript）读取颜色的值。

2) 使用 .attr() 或 .style().

将颜色值分配给您绘制的形状

希望这个简单的 fiddle 可能符合您的意图：http://jsfiddle.net/wg360abt/1/

请注意，这不遵循通常的 enter/update/exit 模式。

Answer 3

上述答案的略微修改方法。希望这可以帮助你：

<input type="color" name="favcolor" value="#cccccc" id="color_pick" onchange="setColor();"/>

在函数中您可以使用选择器设置颜色。

完整代码：http://jsfiddle.net/d_dash/j5Lndom8/

在不重新加载页面的情况下使用颜色选择器更改屏幕上形状的颜色

Changing color of a shape on screen using a color picker without reloading the page

javascript

color-picker