css取色器

作者：自然ㄣ之光发布日期:2025-07-05 浏览:82

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS取色器</title>
    <style>
        .color-box {
            width: 100px;
            height: 100px;
            background-color: #ff0000; /* 初始颜色为红色 */
        }
        input[type="color"] {
            display: block;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="color-box" id="colorBox"></div>
    <input type="color" id="colorPicker">

    <script>
        // 获取DOM元素
        const colorBox = document.getElementById('colorBox');
        const colorPicker = document.getElementById('colorPicker');

        // 监听颜色选择器的变化事件
        colorPicker.addEventListener('input', function() {
            // 将选中的颜色应用到colorBox上
            colorBox.style.backgroundColor = colorPicker.value;
        });
    </script>
</body>
</html>

解释说明：

HTML部分:
- 创建了一个div元素，其类名为color-box，用于展示选中的颜色。
- 添加了一个input元素，类型为color，用于用户选择颜色。
CSS部分:
- 定义了.color-box的宽度和高度，并设置了初始背景颜色为红色（#ff0000）。
- 对input[type="color"]进行了样式调整，使其在页面中更美观。
JavaScript部分:
- 使用getElementById获取colorBox和colorPicker两个元素。
- 给colorPicker添加了一个input事件监听器，当用户选择颜色时，将选中的颜色值赋给colorBox的backgroundColor属性，从而改变colorBox的颜色。

上一篇：css鼠标变手

下一篇：css 嵌套