使用颜色选择器更改屏幕上形状的颜色而不重新编码页面

问题描述：

我正在使用D3开发JavaScript中的程序。我已经加载了一个形状到浏览器。现在我想通过让用户从颜色选择器中选择颜色来更改该形状的颜色。有没有解决这个问题的纯JS解决方案？使用颜色选择器更改屏幕上形状的颜色而不重新编码页面

答

我把它分解成：

1）使用click事件处理（D3或jQuery的或纯JavaScript）来读取颜色值。

2）指定的颜色值，你已经使用.attr()或.style()绘制的形状。

希望这个简单的小提琴可能是沿着你的意图的线路：http://jsfiddle.net/wg360abt/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>

答

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

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

在功能，您可以通过选择设置颜色。

Full code：http://jsfiddle.net/d_dash/j5Lndom8/

使用颜色选择器更改屏幕上形状的颜色而不重新编码页面

相关推荐