javascript - JSColor 在 javascript 中加载值后更新背景颜色

Question

加载值时，JScolor 选择器的背景颜色不会更新。

我在 google 上搜索了解决方案，但它们都是 JQuery 中的，如下所示:

http://activelab.io/troubleshooting/jscolor-update-background-colours-after-loading-values

和

$('.jscolorinput').each(function()
{
    $(this)[0].color.fromString($(this).val());
}); 

JavaScript 的方法是什么？

<小时/>

我现在明白了。颜色选择器的背景颜色可以通过 document.getElementById('someID').jscolor.valueElement.style.backgroundColor 来评估

但是有一个问题，上面的样式必须是“rbg(aa,bb,cc)”的形式，而JScolor值是十六进制的

因此您需要首先编写一个函数将十六进制代码转换为正确的形式:

function HEX_rgb (hex){
    var a = 'rgb(' + parseInt(hex.substring(0,2), 16) + ", " + parseInt(hex.substring(2,4), 16) + ", " + parseInt(hex.substring(4,6), 16) + ')';
    return a;
}

然后更改背景颜色:

document.getElementById('someID').jscolor.valueElement.style.backgroundColor = HEX_rgb(//The HEX code);

顺便说一句，如果您单击和关闭输入框而不更改内部值，背景颜色实际上会更新。

Answer 1

不确定这是否是您想要的，但它对我来说效果很好。

const inputs = document.getElementsByClassName('jscolor');
for (let i = 0; i < inputs.length; i += 1) {
  inputs[i].setAttribute('value', 'ffffff');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js"></script>
<input class="jscolor" value="ab2567">