Question

我正在使用D3在javascript中开发一个程序。我已经为浏览器加载了一个形状。现在我想通过让用户从颜色选择器中选择颜色来更改该形状的颜色。这个问题有没有纯粹的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()将颜色值指定给您绘制的形状。

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

请注意，这不符合通常的输入/更新/退出模式。

Answer 3

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

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

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

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

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

3 个答案: