如何在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颜色选择器上分别更改背景颜色和颜色？

回答

相关问题