Javascript 使用jquery和颜色选择器更改颜色？

我有一个jquery脚本，它通过在文本框中输入颜色代码来立即改变背景的颜色，下面的JSFIDLE链接中有一个工作示例

但我不想使用输入字段，而是想使用颜色选择器自定义皮肤，因为我不想让用户处理十六进制代码（就像twitter一样）。我尝试使用的jquery插件位于

在页面的底部有一个带有DOM元素的整洁的颜色选择器

因此，问题是如何将输入类型更改为颜色选择器div。谢谢：）

如何：

$('#colorSelector').ColorPicker({
onChange: function(hsb, hex, rgb)
          {
            $("#full").css("background-color", hex);
          }
});

---

用div替换输入元素，使用类似：（untested！）

HTML

在链接的底部有一个例子，说明了如何使用

更改文本的更新

HTML

---

我有同样的问题，下面是我的解决方案

编辑colorpicker.js第96行

从

校准数据（'colorpicker'）.onChange.apply（校准，[col，HSBToHex（col））， HSB组织（col）]

到

校准数据（'colorpicker'）.onChange.apply（校准，[col，HSBToHex（col））， HSBToRGB（col），校准数据（'colorpicker'）.el]）

更改事件而不是更改：函数（hsb、十六进制、rgb）

到

onChange：函数（hsb、hex、rgb、el）{
$（el）.val（'#'+hex）；
}

---

作为进一步的参考。。。HTML5已经将“颜色”作为输入类型

<label for="bg">Choose color:</label> 
<input id="bg" type="color" />

现在，关于主要问题。。。您可以通过一个简单的脚本捕获颜色值来更改bg颜色。 现场示例：

谢谢keithics

我也有类似的问题。我不得不打电话给色彩选择器来获取动态按钮。我没有带身份证去上课

这对我帮助很大

$('.colorSelector').ColorPicker({
onChange: function(hsb, hex, rgb,el)
      {
        $(el).val('#' + hex);
      }
});

let drawingBuffer
getColor（颜色选择器）{
让color='ColorPicker1'；
this.drawingBuffer=document.getElementsByClassName（“颜色集”）；
for（var i=0；i

测试
测试1
//这在snipest中不起作用，但使用as-it-code然后使用npm-install它将为您工作

东西的html方面呢必须有一个

作为您的颜色选择器框，然后您的

将在使用时随时更改。谢谢您的回答，但是想象一下我也想改变文本的颜色，html中的div颜色选择器将如何与两个颜色选择器+我的向上投票相区别：））更新答案以显示如何更改文本的颜色，表单上可以有两个颜色选择器，一个用于背景，一个用于文本。我可以再问你一个问题吗，对不起，当颜色用完时，我如何获得值（十六进制），所以我可以把它保存在数据库里！！我很困惑使用onChange事件，您将在那里获得十六进制值。请参阅VillageDiots JSFIDLE以了解如何使用OnChange方法。尝试以下操作：首先安装使用此命令来安装角度颜色选择器“npm install ngx color picker--save”在上述代码中无需使用“let drawingBuffer”只需使用drawingBuffer这是角度解决方案

<div id='colourPickerText'></div>
<div id='textToBeChanged'>Test text</div>

$('#colourPickerText').ColorPicker({
  onChange: function(hsb, hex, rgb){
    $("#textToBeChanged").css("color", '#' + hex);
  }
});

<label for="bg">Choose color:</label> 
<input id="bg" type="color" />

input[type="color"]{/*css-here*/}

$('.colorSelector').ColorPicker({
onChange: function(hsb, hex, rgb,el)
      {
        $(el).val('#' + hex);
      }
});

let drawingBuffer
      getColor(colorPicker) {
        let color = 'ColorPicker1';
        this.drawingBuffer = document.getElementsByClassName("colorSets");
         for (var i = 0; i < this.drawingBuffer.length; i++) {
             this.drawingBuffer[i].style.color = colorPicker;
         }
         this.drawingBuffer.style.color = colorPicker;
        return color;
    }