为何element.style.background无法使用type="color"输入框的选中值？

你的代码主要存在三个核心问题，导致无法正确调用颜色输入框的选中值：

1. 元素选择错误 #

HTML中id="selectColor"的是外层<div>，而非颜色输入框。你用document.getElementById('selectColor').value试图获取颜色值，实际拿到的是div元素的value属性（这显然不存在），自然无法获取用户选择的颜色。

2. 函数逻辑错位 #

selectColor函数的作用应该是返回选中的颜色值，但你在函数里直接写了element.style.background = colorSelected，这里的element根本没有定义，同时也违背了函数的职责——你需要的是让它提供颜色值，而非直接修改样式。

3. 冗余的事件绑定 #

输入框上的onchange="selectColor()"完全多余，因为你的需求是在鼠标按下div时才应用颜色，而非颜色改变时立即操作。

修正后的代码 #

HTML 部分 #

给颜色输入框添加独立的id，方便正确获取元素：

<div>
  Select a Color <input id="colorPicker" type='color'>
</div>

JavaScript 部分 #

重构函数逻辑，简化事件绑定：

// 初始化事件绑定
function colorPixel() {
    // 合并选择器，减少重复代码
    document.querySelectorAll('.contentDivs, .horizontalDivs').forEach(element => {
        element.addEventListener('mousedown', () => {
            element.style.background = getSelectedColor();
        })
    })
}

// 专门负责获取选中颜色的函数
function getSelectedColor() {
    return document.getElementById('colorPicker').value;
}

// 确保DOM加载完成后再执行初始化
window.addEventListener('load', colorPixel);

额外注意事项 #

• 务必确保colorPixel函数在DOM完全加载后执行（比如上面的window.load事件），否则可能找不到.contentDivs和.horizontalDivs元素。
• 如果需要支持鼠标拖拽连续上色，可以额外监听mousemove事件，并配合mousedown/mouseup状态判断来实现。

内容的提问来源于stack exchange，提问作者Daniel M.