如何直接从jscolor中获取十六进制颜色代码？

我来帮你理清这个问题，你遇到的情况其实是jscolor的用法误区，并不是版本更新导致只能通过背景色取RGB值哦～

为什么$('element').val()返回空字符串？ #

你在按钮的jscolor配置里写了{valueElement:'color_value'}，这个配置的作用是把选中的HEX颜色值同步到指定ID为color_value的元素的value属性里，而不是同步到按钮本身的value。所以你直接去拿按钮的val()自然是空的，按钮本身的value属性并不会被jscolor更新。

正确获取HEX值的两种方式 #

方式1：直接通过jscolor实例获取

在你绑定的onchange回调里，this.jscolor就是当前的jscolor实例，它自带方法可以直接获取HEX值：

function changeStrokeCol(jscolorInstance) {
  // 获取带#号的HEX值，比如"#ff0000"
  const hexColor = jscolorInstance.toHEXString();
  // 这里可以把hexColor传给你的config处理
  config.changeStrokeCol(hexColor);
}

这种方法最直接，不需要依赖额外的DOM元素。

方式2：利用配置的valueElement

如果你想保留valueElement的配置，需要确保页面上存在对应的元素，比如添加一个隐藏输入框：

<input type="hidden" id="color_value">
<button id="strokeCol" class="jscolor {valueElement:'color_value'}" onchange="config.changeStrokeCol(document.getElementById('color_value').value)"> Stroke Color </button>

之后你就可以通过document.getElementById('color_value').value或者$('#color_value').val()拿到选中的HEX值了。

关于按钮背景色是RGB的说明 #

jscolor默认会将选中的颜色以RGB格式设置为控件的背景色，这是它的默认样式行为，和HEX值的获取完全不冲突，两者是独立的逻辑，不用通过背景色去转换颜色值。

你之前想的“把HEX代码显示在按钮内再用.html()获取”确实没必要，用上面两种方法就能轻松拿到正确的HEX值啦～

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