如何通过color input修改页面文本颜色？遇ColorLooker未定义报错

首先，你的核心问题是误用了一个不存在的浏览器API：ColorLooker。这个对象根本不是浏览器原生提供的，你错误地把处理文件上传的FileReader逻辑直接套用到了颜色选择器上，这完全没必要——颜色输入框的value本身就是可以直接使用的十六进制颜色值，不需要额外的读取类。

另外还有一个小细节问题：在JS中设置文本颜色应该用document.body.style.color，而不是style.text（text是HTML标签的旧属性，JS操作DOM样式时要使用标准的CSS属性名color）。

修正后的代码 #

把你的changeText函数替换成下面的版本即可：

document.getElementById('textColor').addEventListener('change', changeText, true);
function changeText(){
  // 直接获取颜色选择器的value值
  var color = document.getElementById("textColor").value;
  // 设置body的文本颜色
  document.body.style.color = color;
}

代码解释 #

1. 移除了错误的ColorLooker相关代码：颜色选择器不需要像文件上传那样异步读取内容，它的value直接返回用户选择的十六进制颜色字符串（比如#ff0000）。
2. 替换了样式属性：用标准的style.color替代了非标准的style.text，确保能正确修改文本颜色。
3. 简化了逻辑：不需要判断color是否存在，因为颜色输入框默认就有初始值（你设置的#FFFFFF），用户选择后也一定会返回有效的颜色值。

额外优化建议 #

如果你想让文本颜色实时跟随用户选择（不用等用户点击颜色选择器的确定按钮），可以把change事件换成input事件：

document.getElementById('textColor').addEventListener('input', changeText, true);

另外，为了代码更高效，可以提前缓存DOM元素，避免每次事件触发都重复查询：

// 提前获取元素
const textColorInput = document.getElementById("textColor");
textColorInput.addEventListener('input', changeText, true);

function changeText(){
  document.body.style.color = textColorInput.value;
}

内容的提问来源于stack exchange，提问作者0kazaki101