Using dhtmlxColorPicker to set element properties

Select attribute :

Change attributes with dhtmlxColorPicker

You can change any color-attribute of any html element on page with dhtmlxColorPicker using setOnSelectHandler event and your function.

Source

<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxcolorpicker.css">
   <script>window.dhx_globalImgPath = "../../codebase/imgs/";</script>
   <script  src="../../codebase/dhtmlxcommon.js"></script>
   <script  src="../../codebase/dhtmlxcolorpicker.js"></script>
 
<table><tr><td>
Select attribute : 
<select id="colorType">
<option value="text">Text color</option>
<option value="bg">Background color</option>
<option value="border">Border color</option>
</select>
<div id="testInput" style="border:2px black solid;width:300px;height:420px;";>
<h3 style="font-family:tahoma;margin:10px;">Change attributes with dhtmlxColorPicker</h3>
</div>
</td><td>
<div id="CPcont"></div>
</td></tr></table>
<script>var z = new dhtmlXColorPicker("CPcont", false, true);
z.init();
z.setCustomColors("#ff00ff,#00aabb,#6633ff");
z.setOnSelectHandler(setColor);
z.hideOnSelect(false);
function setColor(color) {
    var ct = document.getElementById("colorType");
    var inp = document.getElementById("testInput");
    switch (ct.value) {
    case "text":
        ;
        inp.style.color = color;
        break;
    case "bg":
        ;
        inp.style.backgroundColor = color;
        break;
    case "border":
        ;
        inp.style.borderColor = color;
        break;
    }
}</script>