使用颜色选择器更改多种背景颜色

时间:2017-08-15 16:22:15

标签: javascript

我在我的网站上使用此colour picker。我需要做的是能够分别改变每个盒子的颜色。我已经查看了JS文件,但发现它对我来说有点复杂。

<!DOCTYPE html>
<html>
<head>
    <title>Color Change option</title>
</head>
<body>


<script src="jscolor.js"></script>

<p>Rectangle color:
<input class="jscolor {onFineChange:'update(this)'}" value="cc66ff">

<p id="rect1" style="border:1px solid gray; width:161px; height:100px;">

<hr />

<p>Rectangle color:
<input class="jscolor {onFineChange:'update(this)'}" value="cc66ff">

<p id="rect2" style="border:1px solid gray; width:161px; height:100px;">


<script>                  
function update(jscolor) {

    // 'jscolor' instance can be used as a string
    document.getElementById('rect').style.backgroundColor = '#' + jscolor
}
</script>

</body>
</html>

2 个答案:

答案 0 :(得分:1)

&#13;
&#13;
SELECT DISTINCT Name
    , STUFF((
        SELECT ',' + Place
        FROM YourTable t1
        where t1.Name = t2.Name
        FOR XML PATH('')
    ), 1, 1, '') AS Places
FROM YourTable t2
&#13;
&#13;
&#13;

这直接来自他们的文档。您只需要修改该函数以接受您想要更改的元素的ID。

答案 1 :(得分:0)

通过将id传递给更新函数,这应该有效:

<p>Rectangle color:
<input class="jscolor {onFineChange:'update(this, \'rect1\')'}" value="cc66ff">

<p id="rect1" style="border:1px solid gray; width:161px; height:100px;">

<hr />

<p>Rectangle color:
<input class="jscolor {onFineChange:'update(this, \`rect2\')'}" value="cc66ff">

<p id="rect2" style="border:1px solid gray; width:161px; height:100px;">


<script>                  
    function update(jscolor, id) {

     // 'jscolor' instance can be used as a string
     document.getElementById(id).style.backgroundColor = '#' + jscolor
    }
</script>