DHTMLX Docs & Samples Explorer

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>