如何在JavaScript中修改-webkit-color-swatch属性实现颜色选择器交互？

我需要制作一个自定义样式的颜色选择器，通过-webkit-color-swatch伪元素修改它的外观，并且给它添加了背景渐变图。预期点击颜色选择器时，背景图消失，显示标准的颜色选择面板，但这个功能一直无法正常工作。

以下是我原本使用的代码：

JavaScript 代码 #

document.getElementById("short-text-yk693v5pm").onclick = function() {
    removeColorGradient()
};

function removeColorGradient() {
    document.getElementById("short-text-yk693v5pm").style['-webkit-color-swatch'] = "none";
}
document.getElementById("short-text-yk693v5pm").value = "#FFFFFF";

CSS 代码 #

#short-text-yk693v5pm::-webkit-color-swatch {
    border-radius: 10px;
    border: 3px solid white;
    background-image: url(/wp-content/uploads/color-gradient.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

问题原因 #

直接通过元素的style属性修改-webkit-color-swatch是无效的，因为::-webkit-color-swatch是伪元素，它不属于DOM中的实际节点，JavaScript无法直接操作伪元素的样式。

解决方案：用CSS类切换控制伪元素样式 #

我们可以通过给颜色选择器添加/移除CSS类的方式，间接控制伪元素的背景图显示状态。

修改后的CSS代码

#short-text-yk693v5pm::-webkit-color-swatch {
    border-radius: 10px;
    border: 3px solid white;
    background-image: url(/wp-content/uploads/color-gradient.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

/* 添加一个类，用来移除背景图 */
#short-text-yk693v5pm.no-gradient::-webkit-color-swatch {
    background-image: none;
}

修改后的JavaScript代码

const colorPicker = document.getElementById("short-text-yk693v5pm");
colorPicker.value = "#FFFFFF";

// 点击时添加类，移除背景图
colorPicker.addEventListener('click', () => {
    colorPicker.classList.add('no-gradient');
});

// 可选：当颜色选择完成后，延迟恢复背景图（适配选择器关闭的时机）
colorPicker.addEventListener('change', () => {
    setTimeout(() => {
        colorPicker.classList.remove('no-gradient');
    }, 100);
});

说明 #

• 点击颜色选择器时，给元素添加no-gradient类，触发CSS规则移除伪元素的背景图，显示标准选择面板。
• 监听change事件并延迟恢复类，是为了在用户选择完颜色、选择器面板关闭后，重新显示自定义的背景渐变图，保持初始的自定义样式。

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