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

【问题标题】：JSColor update background colours after loading values in javascriptJSColor在javascript中加载值后更新背景颜色
【发布时间】：2018-02-11 14:52:34
【问题描述】：

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

我在谷歌上搜索了解决方案，但它们都在 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的值是HEX的

因此你需要先编写一个函数来将 HEX 代码转换为正确的形式：

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);

顺便说一句，如果你在不改变里面的值的情况下点击和关闭输入框，背景颜色实际上会更新。

【问题讨论】：

标签： javascript jquery jscolor

【解决方案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">

【讨论】：

【解决方案2】：

您需要getElementsByClassName 并循环迭代每一个

function update(jscolor) {
    // 'jscolor' instance can be used as a string
    var color = document.getElementsByClassName('color');
    
    
    for(var i=0, len=color.length; i<len; i++)
    {
        color[i].style.backgroundColor = '#' + jscolor;
    }
}

.color{
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js"></script>
<input class="jscolor" onchange="update(this.jscolor)" value="ffffff">
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>

【讨论】：