javascript - 如何在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 script link

what i have try 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>