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（＆＃39; someID＆＃39;）来评估颜色选择器的背景颜色.jscolor.valueElement.style.backgroundColor

但是有一个问题，上面的样式必须采用＆＃34; rbg（aa，bb，cc）＆＃34;的形式，而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);

顺便说一下，如果单击打开和关闭输入框而不更改内部值，背景颜色将实际更新。

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>

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

2 个答案: