生活随笔
收集整理的這篇文章主要介紹了
html颜色拾取器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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
總結
以上是生活随笔為你收集整理的html颜色拾取器的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
