Question

我有

<input type="color" id="colorDialogID">
<div id="textToColorID">Text to color</div>
<input type="button" id="setColorButtonID">

我想点击按钮显示颜色对话框。当我选择特定颜色并按下“确定”时，会显示一些文字以获得所选颜色。

我需要js代码。我现在谷歌搜索近一个小时，找到一种方法如何从代码中显示代码选择器窗口，但没有成功。我只得到一些插件。我无法理解为什么一切都必须如此复杂javascript。

Answer 1

好的，为了将来参考，提供代码片段总是好的 - 甚至更好的JSFiddle链接，但这就是我现在所拥有的。

document.getElementById("setColorButtonID").addEventListener("click", function() {
  document.getElementById("colorDialogID").focus();
  document.getElementById("colorDialogID").value = "#FFCC00"; //Set the default color  NOTE: Remove the line to get the default of #000000
  document.getElementById("colorDialogID").click();
});

function getColor() {
  var color = document.getElementById("colorDialogID").value;
  document.getElementById("textToColorID").style.color = color;
}

#colorDialogID {
  position: absolute;
  visibility: hidden;
}

<input type="color" id="colorDialogID" onchange="getColor(this)">
<div id="textToColorID">Text to color</div>
<input type="button" id="setColorButtonID" value="Edit Color">

如果您愿意，我可以在代码中添加一些注释来逐行解释 - 但这应该可行。

希望有所帮助：）

Answer 2

看看jscolor。它非常简单，您可以轻松找到您正在寻找的功能。

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script>

Color: <input class="jscolor" value="ab2567">

＆＃13;

如何从js代码

2 个答案: