JScolor更新背景颜色在JavaScript中加载值后

Question

加载值时JScolor拾取器的背景颜色不会更新。

我在Google上搜索了该解决方案，但它们都在jQuery中，如这些：

http://activelab.io/troubleshooting/jscolor-update-background-colours-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

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

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">

Answer 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>