如何在js顏色選擇器上分別更改背景顏色和顏色？

如何更改任何元素的背景顏色和顏色，例如輸入框或者JS顏色選擇器中對同一事件分別DIV如何在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>

我必須使用jscolor.js挑顏色，並將其應用於輸入框

jscolor script link

what i have try jsfiddel link

我想分別改變背景顏色和文字顏色

來源

2017-05-04 c.grey

做一個在線演示或片段，你有什麼到目前爲止已經試過。 –

該插件認爲要做你正在描述的內容，你的問題是什麼？ – madalinivascu

rohan檢查fiddel鏈接 –

試試

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>

來源

2017-05-04 10:15:26

如何在js顏色選擇器上分別更改背景顏色和顏色？

回答

相關問題