javascript 顏色選擇器
[英]javascript color picker
問題描述
如果您使用 Gmail，您就知道可以更改標簽的顏色。 沒有太多的顏色選擇，我也希望在我的網絡應用程序中有類似的東西。 即使是帶有一些顏色的<select>也會很棒。 jQuery ColorPicker 提供了多種顏色可供選擇，而我不需要那個。
您知道與 Gmail 標簽顏色選擇器類似的東西嗎？
5 個解決方案
解決方案1
2 2013-04-22 10:55:34
我開發了一個基於 HTML <select>的簡單顏色選擇器： jquery-simplecolorpicker
內聯模式：
選擇器模式：
在線演示： http : //plnkr.co/edit/VVclW0?p=preview
解決方案2
2 已采納 2011-12-02 09:47:43
真正簡單的顏色選擇器怎么樣？ （演示）
解決方案3
1 2012-05-14 11:43:22
你也可以檢查這個
解決方案4
0 2015-08-10 01:22:05
查看我的跨瀏覽器兼容顏色選擇器（顏色選擇器）。 如果您想在不支持 HTML5（例如 IE6）的舊網絡瀏覽器中打開您的網頁，您可以使用我的顏色選擇器而不是 <input type="color">。
<!--<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">--> <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Color Selector</title> <meta name="author" content="Andrej Hristoliubov anhr@mail.ru"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" href="https://rawgit.com/anhr/ColorSelector/master/ColorSelector.css" type="text/css"> <script type="text/javascript" src="https://rawgit.com/anhr/ColorSelector/master/Common.js"></script> <script type="text/javascript" src="https://rawgit.com/anhr/ColorSelector/master/ColorSelector.js"></script> </head> <body> <p> Your browser does not supports HTML5 if you do not see the HTML5 color selector here: <input type="color"> Instead you see a text input field. </p> <hr> My Color Selectors: <p> <input id="colorSelector1"> <script> colorSelector.Create("black", function(selectedColor){ consoleLog("selectedColor = " + selectedColor); var elementSelectedColor = document.getElementById("SelectedColor1") //elementSelectedColor.innerText = selectedColor;//Uncompatible with FireFox elementSelectedColor.innerHTML = selectedColor; elementSelectedColor.style.background = selectedColor; elementSelectedColor.style.color = invertHex(colourNameToHex(selectedColor)); } , "colorSelector1" ); </script> Selected color: <span id="SelectedColor1"></span> </p> <p> <input id="colorSelector2"> <script> colorSelector.Create("#ffffff", function(selectedColor){ consoleLog("selectedColor = " + selectedColor); var elementSelectedColor = document.getElementById("SelectedColor2") //elementSelectedColor.innerText = selectedColor;//Uncompatible with FireFox elementSelectedColor.innerHTML = selectedColor; elementSelectedColor.style.background = selectedColor; elementSelectedColor.style.color = invertHex(colourNameToHex(selectedColor)); } , "colorSelector2" ); </script> Selected color: <span id="SelectedColor2"></span> </p> <hr> Have a job for me? Please read <a href='../AboutMe/' target="_blank">About Me</a>. </body> </html>
另請參閱我的顏色選擇器示例
解決方案5
0 2020-12-26 23:27:20
這是最簡單、最干凈的取色過程。 僅使用 HTML。
<input type="color" name="option_color" value="#DCEBD8" list="colors" style="height: 35px;width:60px"> <datalist id="colors"> <option>#DDDDDD</option> <option>#F7D1D0</option> <option>#DCEBD8</option> <option>#D2E4EB</option> <option>#F7F0C5</option> <option>#E1D8ED</option> <option>#FFD5C2</option> <option>#D1F3EC</option> <option>#658CBB</option> <option>#e0c9bf</option> </datalist>
將顏色選擇器顏色分配給變量並使用 JavaScript 的 fontcolor 變量
[英]Assigning a color picker color to a variable and using the variable for fontcolor using JavaScript
在 Javascript 中創建的顏色選擇器未將顏色值渲染到 DOM
[英]Color Picker Created in Javascript not rendering color values to DOM
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.