如何在设置默认值后动态更新jscolor调色板？

要实现选择颜色后动态更新调色板，核心是直接操作jscolor实例的属性，而不是只修改初始化用的数组或预设。你的代码里已经把选中的颜色加入了customColors，但没有同步到已经创建的jscolor实例上，所以调色板不会更新。

修改后的代码如下：

let customColors =  [
    '#2C2B2B', '#FFEE92', '#17C3B2', '#71A5DE', '#C27EC2', '#FE6D73',
];

jscolor.presets.default = {
    position: 'right',
    palette: customColors,
    hideOnPaletteClick: true,
};

const colorPicker = document.getElementById('color-picker');
colorPicker.addEventListener('input', () => {
    const selectedColor = colorPicker.value;
    // 可选：避免重复添加相同颜色
    if (!customColors.includes(selectedColor)) {
        customColors.push(selectedColor);
        // 直接更新jscolor实例的palette并刷新
        colorPicker.jscolor.palette = customColors;
        colorPicker.jscolor.update();
    }
});

关键说明： #

• 每个通过jscolor初始化的元素，都会绑定一个jscolor属性，指向对应的实例对象
• 修改实例的palette属性后，必须调用update()方法，让jscolor重新渲染调色板
• 可选添加去重逻辑，防止调色板里出现重复颜色；如果需要限制调色板长度，可以用customColors = customColors.slice(-10)保留最近10个颜色

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