使用顏色選擇器更改屏幕上形狀的顏色而不重新編碼頁面

我正在使用D3開發JavaScript中的程序。我已經加載了一個形狀到瀏覽器。現在我想通過讓用戶從顏色選擇器中選擇顏色來更改該形狀的顏色。有沒有解決這個問題的純JS解決方案？使用顏色選擇器更改屏幕上形狀的顏色而不重新編碼頁面

來源

2015-07-22 DTNPerera

我把它分解成：

1）使用click事件處理（D3或jQuery的或純JavaScript）來讀取顏色值。

2）指定的顏色值，你已經使用.attr()或.style()繪製的形狀。

希望這個簡單的小提琴可能是沿着你的意圖的線路：http://jsfiddle.net/wg360abt/1/

注意，這不按照通常的輸入/更新/出模式。

來源

2015-07-22 07:40:17

此代碼應工作

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

來源

2015-07-22 06:55:06 Chop

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

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

在功能，您可以通過選擇設置顏色。

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

來源

2015-07-22 10:50:09

使用顏色選擇器更改屏幕上形狀的顏色而不重新編碼頁面

回答

相關問題