如何在js选色器上分别改变背景色和颜色？

Question

如何在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脚本链接

我试过jsfiddel link

我想分别更改背景颜色和文本颜色。

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

​