html取色器

作者：▍看女人酒醒的疯癫。发布日期:2026-02-10 浏览:61

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML取色器</title>
    <style>
        #colorPicker {
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <h1>HTML取色器示例</h1>
    <input type="color" id="colorInput" onchange="updateColor()">
    <div id="colorPicker"></div>
    <script>
        function updateColor() {
            // 获取输入的颜色值
            const color = document.getElementById('colorInput').value;
            // 更新 div 的背景颜色
            document.getElementById('colorPicker').style.backgroundColor = color;
        }
    </script>
</body>
</html>

解释说明：

HTML结构:
- 使用了一个 input 元素，类型为 color，用于选择颜色。
- 一个 div 元素用于显示所选颜色。
CSS样式:
- 设置了 div 的宽度和高度，并添加了边框，以便更清楚地看到颜色变化。
JavaScript功能:
- 当用户选择颜色时，onchange 事件触发 updateColor 函数。
- updateColor 函数获取 input 元素中的颜色值，并将其设置为 div 的背景颜色。

上一篇：span在html是什么意思

下一篇：html文字颜色