Javascript 将变量值设置为 html 颜色选择器十六进制值

Question

我目前有一个带有 html 颜色选择器的项目。我还有一个使用 JavaScript 声明的名为 color 的变量。我想知道的是如何将可变颜色不断设置为颜色选择器的十六进制值。例如，如果我将颜色选择器更改为蓝色，变量颜色将设置为 #009DFF（蓝色的十六进制值）

如何做到这一点？

<input
        type="color"
        value="#ff0000"
        style="border:3px solid #222; border-radius: 6px; "
  
      />
      
      <script>
      let color = 5;
      document.write (color);
      </script>

Fiddle: https://jsfiddle.net/AidanYoung/pjw1mzL3/2/

Answer 1

我会在颜色输入上放置一个 id，然后使用 document.getElementById 在 javascript 中访问它以获取值。像这样：

<input
  type="color"
  value="#ff0000"
  style="border:3px solid #222; border-radius: 6px;"
  id="colorPicker"
/>
      
<script>
  let color = document.getElementById("colorPicker").value;
  console.log(color);
</script>

Answer 2

您可以使用颜色选择器对象的 onchange 事件处理程序来完成。

var colorCode;

function colorPickerEventHandler(value){
    colorCode= value;
    alert(colorCode);
    console.log(colorCode);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>
        <label for="color-picker">First Color Picker: </label>
        <input onchange="colorPickerEventHandler(this.value)" id="color-picker" type="color" value="#000000"/>
    </p>
</body>
</html>

Answer 3

我假设您想在每次更改颜色选择器时更新它旁边的文本。

首先，你的脚本标签中的代码只会被执行一次。除非您提供该功能，否则它不会实时更新。

其次，document.write 会将颜色值添加到您的文档中，因此即使您多次调用它，您的页面最终也会看起来像 5#ff0000#f932a2#bb7d3e...。

如果您想在颜色选择器的值发生变化时调用函数，请使用输入的 oninput 或 onchange 属性来调用 javascript 中的函数。

然后，在函数中，select您的 DOM 中的特定元素更改其值。

function updateColorText(colorText) {
  document.getElementById("color-text").innerText = colorText;
}

<input
    type="color"
    value="#ff0000"
    style="border:3px solid #222; border-radius: 6px;"
    oninput="updateColorText(this.value)"
/>
<span id="color-text"></span>

我建议查看 input event, change event 并阅读 JavaScript 一般事件处理。

Javascript 将变量值设置为 html 颜色选择器十六进制值

Javascript set variable value to html color picker hex value

html

javascript

input