Comment changer la couleur de fond et la couleur respectivement sur le sélecteur de couleur js?

Question

Comment changer la couleur de fond et la couleur de n'importe quel élément, par ex. boîte d'entrée ou d'un div respectivement sur un même événement sur sélecteur de couleur js

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

i peuvent utiliser jscolor.js pour choisir la couleur et l'appliquer à la boîte d'entrée

jscolor script link

what i have try jsfiddel link

i voulez changer les deux couleurs - couleur de fond et couleur de texte respectivement

Answer 1

Essayez-le

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'); 
 
\t \t \t

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