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扩展插件https://www.jeasyui.net/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实现的参考 https://www.17sucai.com/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 https://download.csdn.net/download/chyuanrufeng/13122618