JavaScript 如何通过选色器选择背景色

在使用HTML和CSS创建网页时，我们需要从颜色选择器中选择一种颜色。此外，有时我们可能需要通过颜色选择器的输入来选择背景颜色。

在本教程中，我们将学习不同的方法，这些方法允许用户从取色器输入中选择背景颜色，当用户选择一种新的颜色时，应该改变背景颜色。

使用颜色选择器来改变背景颜色

在HTML中，颜色选择器输入允许用户从中选择一种颜色。我们可以使用输入的value属性来获得一个选定的颜色值。

语法

用户可以按照下面的语法，根据取色器上的选定值来改变背景颜色。

Document.body.style.backgroundColor = color.value;

我们在上面的语法中访问文档和正文样式对象，并改变其’backgroundColor‘属性。

示例

在下面的例子中，我们已经创建了输入并添加了颜色类型。因此，输入将作为一个颜色选择器工作。用户可以从颜色选择器中选择任何颜色，然后点击 “改变颜色 “按钮来调用selectColor()函数。

selectColor()函数根据从选色器中选择的最新值改变文档主体的背景颜色。

<html>
<head>
   <style>
      button {
         font-size: 1.2rem;
         border-radius: 10px;
         margin: 20px;
         border: 2px solid blue;
         color: red;
      }
   </style>
</head>
<body>
   <h2>Use the <i>color picker</i> to change a background color via color picker</h2>
   <input id = "colorInput" type = "color">
   <button onclick = "selectColor()"> Change the color </button>
   <script>
      function selectColor() {
         let color = document.getElementById('colorInput');
         // changing the background color
         document.body.style.backgroundColor = color.value;
      }
   </script>
</body>
</html>

使用输入事件

JavaScript包含了太多的事件。我们将使用输入事件来检测颜色选择器中的最新事件。我们将在JavaScript中通过id访问颜色输入，并调用addEventListener()方法。

我们将把’input’作为addEventListener()方法的第一个参数，把回调函数作为第二个参数，以根据用户从颜色选择器中选择的颜色来改变主体的背景颜色。

语法

用户可以按照下面的语法来使用输入事件，通过颜色选择器来改变背景颜色。

colorInput.addEventListener('input', () => {
   document.body.style.backgroundColor = color.value;
})

示例

在这个例子中，我们创建了颜色选择器输入，它的id是”colorInput“。我们在JavaScript中通过它的id访问输入元素。之后，我们使用addEventListner()方法和样式对象的backgroundColor属性，通过颜色输入来改变主体的背景颜色。

<html>
<body>
   <h2>Using the <i>input event</i> to change a background color via color picker</h2>
   <input id = "colorInput" type = "color">
   <script>
      let colorInput = document.getElementById('colorInput');
      // Whenever the user changes the color, the input event will be called.
      colorInput.addEventListener('input', () =>{
         document.body.style.backgroundColor = colorInput.value;
      });
   </script>
</body>
</html>

使用setting()函数

setInterval()函数允许我们在一个特定的时间间隔后调用一个特定的函数。它把一个回调函数作为第一个参数，把一个以毫秒为单位的时间间隔作为第二个参数。

setInteral()函数在一段时间后调用回调函数。这里，我们将根据回调函数中颜色选择器中的颜色值来改变背景颜色的值。

语法

用户可以按照下面的语法，使用setInterval()函数，从选色器中选择背景颜色。

setInterval(() => {
   document.body.style.backgroundColor = colorValue;
}, 100);

在上述语法中，colorValue是我们从颜色选择器中得到的颜色值。

示例

在下面的例子中，作为setInterval()函数的参数传递的箭头函数将在每100毫秒后被调用。在箭头函数中，我们通过id访问颜色输入，使用value属性获得其颜色值，并将其分配给style对象的‘backgroundColor‘属性。

用户可以在输出中看到，当他们在选色器中改变颜色时，它将立即反映为文档主体的背景颜色。

<html>
<head>
   <style>
      body {
         color: white;
      }
   </style>
</head>
<body>
   <h2>Using the <i>setInterval()</i> function to change a background color via color picker.</h2>
   <input id = "color" type = "color" value = "fff">
   <script>
      // Change color after every 100 seconds
      setInterval(() => {
         let color = document.getElementById('color');
         let colorValue = color.value;
         document.body.style.backgroundColor = colorValue;
      }, 100);
   </script>
</body>
</html>

我们在本教程中学习了三种方法，从取色器中选择一种颜色，并根据其数值改变车身的背景颜色。用户可以使用第二种方法，不用按按钮就能立即改变背景色。

然而，第三个使用setInterval()函数的方法也会在我们从选色器中选取时立即改变背景颜色。但是，即使我们不改变颜色选择器中的值，它也会在每100毫秒后调用。因此，它可能会降低我们应用程序的性能。