HTML HTML5 input type color: 设置无色/删除颜色

在本文中，我们将介绍如何使用HTML5中的input type color来设置无色或删除颜色。

阅读更多：HTML 教程

什么是input type color？

HTML5中的input type color是一种用于选择颜色的表单元素。它允许用户从一个颜色选择器中选择一个颜色，并将所选颜色的值发送给服务器或在浏览器中使用。

设置无色

有时候，我们希望将input type color设置为无颜色，即将其值设为空。这可以通过设置input元素的value属性为空字符串来实现。

<input type="color" value="" id="myColor">

上述代码创建了一个input type color元素，并将其value属性设置为空字符串。用户在选择颜色时，不会显示任何预设颜色，即相当于无色。

删除颜色

与设置无色略有不同，删除颜色涉及到将已选择的颜色完全从input type color中删除。我们可以使用JavaScript来实现此操作，通过将value属性设置为null来删除颜色。

<input type="color" value="#ff0000" id="myColor">
<button onclick="deleteColor()">删除颜色</button>

<script>
    function deleteColor() {
        document.getElementById("myColor").value = null;
    }
</script>

上述代码中，我们创建了一个input type color元素，并给它一个初始值（这里是红色）。随后，在按钮的onclick事件中，调用deleteColor()函数来删除颜色。该函数会将input元素的value属性设置为null，从而删除了已选择的颜色。

示例说明

让我们通过一个示例来进一步理解设置无色和删除颜色的应用场景。

假设我们正在开发一个在线绘图应用，用户可以在画布上绘制各种形状，并为每个形状选择不同的颜色。当用户选择无色时，我们希望画布上的形状恢复到原始的无色状态。

<canvas id="myCanvas" width="500" height="500" style="border:1px solid black;"></canvas>

<input type="color" value="" id="colorPicker">
<button onclick="setColor()">设置颜色</button>
<button onclick="clearColor()">清除颜色</button>

<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    function setColor() {
        var color = document.getElementById("colorPicker").value;
        context.fillStyle = color;
    }

    function clearColor() {
        document.getElementById("colorPicker").value = null;
        context.clearRect(0, 0, canvas.width, canvas.height);
    }
</script>

上述代码中，我们首先创建了一个canvas元素，并给它一个id，这样我们可以通过JavaScript获取并操作它。接着，我们创建了一个input type color元素和两个按钮。用户通过颜色选择器选择颜色，并通过点击”设置颜色”按钮来将颜色应用到画布上的形状。当用户点击”清除颜色”按钮时，我们调用clearColor()函数来删除已选择的颜色，并清除画布上的形状。