1、利用easyui的扩展插件color
<input class="easyui-color">
2、 利用H5的新类型type=color
<input type="color" name="color" id="color" οnchange="changeColor()"> //选择颜色的标签，type="color"
<span id="colorInfo"></span>
3、 利用js实现
<div class="picker" id="color-picker" style="background-color: rgb(102, 84, 57);">请选择颜色</div>
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>表格数据修改</title><link id="easyuiTheme" rel="stylesheet" type="text/css" href="./jquery-easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="./jquery-easyui/themes/icon.css"><script type="text/javascript" src="./jquery-easyui/jquery.min.js"></script><script type="text/javascript" src="./jquery-easyui/jquery.easyui.min.js"></script><script src="./jquery-easyui/jquery.color.js"></script><script src="./js/color_change.js"></script></head><body><h3>利用easyui的color扩展插件/extension/207.html</h3><input class="easyui-color"><br /><hr /><h3>h5的新类型 color</h3><input type="color" name="color" id="color" onchange="changeColor()"> //选择颜色的标签，type="color"<span id="colorInfo"></span><br /><h3>利用color_change.js实现的参考 /pins/34846.html</h3><div class="picker" id="color-picker" style="background-color: rgb(102, 84, 57);">请选择颜色</div><script>function changeColor(){ var color = document.getElementById("color"); //通过使用 getElementById() 来访问 <color> 元素var colorInfo = document.getElementById("colorInfo");colorInfo.style.color = color.value; //给<span>的字体加颜色colorInfo.innerHTML = color.value; //给<span>加内容(<color>的值) //改变颜色的事件colorInfo.style.color = color.value;colorInfo.innerHTML = color.value;}//使用color_change.js使用Colorpicker.create({el: "color-picker",color: "#000fff",change: function (elem, hex) {elem.style.backgroundColor = hex;//document.getElementById("picker_input").value = hex;//$(".datagrid-view2").css("background-color",hex)}})</script></body></html>
color_change.js/download/chyuanrufeng/13122618
