如何在js颜色选择器上分别更改背景颜色和颜色？答案

【问题标题】：How to change background-color and color both respectively on js color picker?如何在js颜色选择器上分别更改背景颜色和颜色？
【发布时间】：2017-05-04 07:02:03
【问题描述】：

如何更改任何元素的背景颜色和颜色，例如js颜色选择器上的同一事件分别输入框或div

<div class="search-div" style="margin:-60px auto;">
  <input type="text" max-length="255" id="rect" placeholder="Search" class="search-box"/>
  <button class="btn btn-md btn-warning jscolor {valueElement:'valueInput',styleElement:'rect'}">Click here to pick a color</button>
</div>

我已经使用 jscolor.js 来选择颜色并将其应用到输入框

jscolor script link

what i have try jsfiddel link

我想改变两种颜色 - 背景颜色和文本颜色分别

【问题讨论】：

制作一个在线演示或sn-p，到目前为止你已经尝试过。
插件看到做你所描述的，你的问题是什么？
rohan 检查fiddel链接

标签： javascript jquery html colors jscolor

【解决方案1】：

试试看

var options = {
    valueElement: "valueInput",        
    styleElement:'rect',
    width: 300,
    height: 120,
    sliderSize: 20,
    position: 'top',
    insetColor: '#CCC',
    backgroundColor: '#202020'
};

var pickers = {};
function update () {
    document.getElementById('rect').style.backgroundColor = pickers.changeBackgroundColor.toHEXString();
    document.getElementById('rect').style.color=pickers.changecolor.toHEXString();
}

pickers.changecolor = new jscolor('change-color', options);
pickers.changecolor.onFineChange = update;
pickers.changecolor.fromString('000');          
pickers.changeBackgroundColor = new jscolor('change-backgroundColor',options);
pickers.changeBackgroundColor.onFineChange = update;

update('change-color');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js"></script>
  <input type="text" max-length="255" id="rect" placeholder="Search" class="search-box"/>
  <button id="change-backgroundColor">Click here to pick a background color</button>
  <button id="change-color">Click here to pick a font color</button>

【讨论】：