如何让通过DOM创建的jscolor按钮仅显示颜色（无文本）

你遇到的问题核心在于jscolor的配置需要在实例化时传入，而不是事后修改实例属性。HTML里通过类名传入配置是jscolor的自动初始化语法，但用JS手动创建实例时，需要直接把配置对象作为第二个参数传给构造函数。

正确的实现代码 #

把你创建jscolor实例的代码替换成下面的写法，直接在初始化时指定valueElement: null：

var newPlayerColor = document.getElementById('colorPicker').value;
var input = document.createElement('INPUT');

// 关键：实例化时传入配置对象
var newColorButton = new jscolor(input, {
  valueElement: null,
  value: newPlayerColor // 直接把初始颜色传进去
});

input.style.backgroundColor = newPlayerColor;
input.style.height = '20px';
input.style.width = '20px';
input.style.cursor = 'pointer';
newDiv.appendChild(input);

为什么之前的方法无效？ #

• 直接设置newColorButton.valueElement = null：valueElement是jscolor的初始化配置项，实例创建完成后修改这个属性不会触发内部逻辑的更新，所以无效。
• 添加类名的方式：HTML里的class="jscolor {valueElement:null,...}"是jscolor针对DOM元素的自动初始化语法，JS手动创建实例时不适用这种方式，必须通过构造函数的第二个参数传配置。

这样修改后，你的颜色按钮就只会显示背景色，不会再显示十六进制文本，同时依然可以正常点击打开颜色选择器。

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