通过js创建时HTML5输入类型颜色不显示值答案

【问题标题】：HTML5 input type color doesn't show value when created via js通过js创建时HTML5输入类型颜色不显示值
【发布时间】：2013-10-10 07:06:43
【问题描述】：

我正在通过 javascript 创建一个表格，其中一列将包含一个 html 颜色选择器。我遇到的问题是，在 Chrome 中设置了默认值，但颜色选择器上显示的颜色是黑色。

这是我正在使用的 javascript

c = r.insertCell(1);
c.setAttribute('class','second');
inp=document.createElement("input"); 
inp.setAttribute('type','color');
inp.setAttribute('id','colo_'+i);
inp.setAttribute('value','#ffffff');
inp.setAttribute('class','datafield');
inp.addEventListener('change', saveFields);
c.appendChild(inp);

这是由 if 生成的 html

这是一个错误还是我做错了什么？

【问题讨论】：

标签： javascript html

【解决方案1】：

有趣。我能够复制您的结果 (example)。

不使用setAttribute，直接设置value：

inp.value = '#ffffff';

显然这让 Chrome 很高兴。 (Live Copy | Source)

附注：您通过setAttribute 设置的所有内容都反映了您可以使用的属性：

inp = document.createElement("input"); 
inp.type = 'color';
inp.id = 'colo_'+i;
inp.value = '#ffffff';
inp.className = 'datafield';

注意最后一个是className而不是class。

Updated Example | Source

【讨论】：

【解决方案2】：

有一天它可能会对某人有所帮助，所以我将其放在这里：输入颜色的值似乎只适用于十六进制值（而不是 RGB） - 所以如果你的颜色是 RGB - 首先将其切换为十六进制。 RGB to hex

【讨论】：