html颜色拾取器

最新推荐文章于 2022-01-30 01:54:02 发布

缘如风

最新推荐文章于 2022-01-30 01:54:02 发布

阅读量3.9k

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/chyuanrufeng/article/details/109745212

版权

Web 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

1、利用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

缘如风

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
html颜色拾取器

1、利用easyui的扩展插件color<input class="easyui-color"> 2、利用H5的新类型type=color <input type="color" name="color" id="color" onchange="changeColor()"> //选择颜色的标签，type="color" <span id="colorInfo"></span> ...
复制链接

扫一扫