html颜色选择器

作者：傲世，小狂徒发布日期:2025-09-23 浏览:82

<!DOCTYPE html>
<html>
<head>
    <title>HTML颜色选择器</title>
</head>
<body>

<h2>HTML颜色选择器示例</h2>

<!-- 创建一个输入框，类型为颜色选择器 -->
<input type="color" id="colorPicker" value="#ff0000">

<!-- 显示选中的颜色值 -->
<p>你选择的颜色是: <span id="selectedColor">#ff0000</span></p>

<script>
// 获取颜色选择器和显示颜色的元素
var colorPicker = document.getElementById("colorPicker");
var selectedColor = document.getElementById("selectedColor");

// 当颜色选择器的值发生变化时，更新显示的颜色值
colorPicker.addEventListener("input", function() {
    selectedColor.textContent = colorPicker.value;
});
</script>

</body>
</html>

解释说明：

<input type="color">：创建一个颜色选择器输入框，默认值为红色（#ff0000）。
<span id="selectedColor">：用于显示用户选择的颜色值。
JavaScript部分：监听颜色选择器的 input 事件，当用户选择新的颜色时，更新页面上显示的颜色值。

上一篇：html实体

下一篇：html label标签