页面上 <input type="color"> 元素的颜色与其值属性不匹配答案

【问题标题】：The color of and <input type="color"> element on a page DOESN'T match its value attribute页面上 <input type="color"> 元素的颜色与其值属性不匹配
【发布时间】：2020-09-16 20:34:12
【问题描述】：

我正在进行一项个人练习，我在其中创建了一个小应用程序，以允许用户使用 <input type = "color"> 元素更新 SVG 不同部分的颜色。

我正在玩的 SVG 是一个简单的云图，里面有文字。您可以修改 3 个部分：云的笔触颜色、云的填充颜色和文字的颜色。

现场观看：

直播：https://argonathmos.github.io/SVGfun/
代码： https://github.com/argonathmos/SVGfun

这是一个简单的 UI，有 3 个区域：

随机按钮，将随机颜色应用于 SVG。
三个 <input type="color"> 元素用于 SVG 的每个部分手动修改每种颜色。
下载按钮，允许用户导出带有自定义颜色的 SVG。

以下是我注意到的困扰我但还不知道如何解决的问题：

当我点击“随机”时，SVG 颜色以及<input type="color"> 元素的值以及页面上元素的颜色（即 小方块 颜色与相关 SVG 部分的颜色相匹配）。
当我通过<input type="color"> 元素单独应用颜色时，SVG 的颜色以及<input type="color"> 元素的值会更新，输入颜色元素的颜色也会更新在页面上（小方块）。
但是如果我在手动从颜色选择器中选择了一种颜色后单击“随机”： SVG 颜色已更新，<input type="color"> 元素的 value 属性也已更新，但页面上元素的颜色不会更新，它与之前手动选择的颜色保持一致。 （即小方块颜色与相关 SVG 部分的颜色不匹配，尽管元素的 value 属性匹配。）

【问题讨论】：

请阅读How to Ask。与您的问题相关的代码直接属于您的问题，以文本形式且格式正确，或作为可执行堆栈片段，在有意义的情况下。请不要只是在外部平台上提供代码 - 当它在那里消失时，这里的问题将失去所有上下文。
请在问题中包含minimal reproducible example。解决此问题后，异地链接将来将不再有用，因此没有其他人可以从解决方案中受益-不是其他遇到类似问题的访问者，甚至如果有人提出可能更好的解决方案，即使是您也一样.
重复setAttribute is not working in JavaScript

标签： javascript html

【解决方案1】：

将strokeColorInput.setAttribute、fillColorInput.setAttribute、pathColorInput.setAttribute 更改为：

strokeColorInput.value = strokeColor;
fillColorInput.value = fillColor;
pathColorInput.value = uniquePathcolor;

当您更新 HTML 值时。 .setAttribute 用于 CSS 属性值。

【讨论】：

【解决方案2】：

问题似乎是，您正在使用

 strokeColorInput.setAttribute('value',strokeColor);

更新颜色输入字段的值。这可以为您尚未明确选择的字段设置颜色，但是一旦您这样做了，它就不再按预期工作了。

（这可能是这里众所周知的attribute vs property问题/问题的体现，见What is the difference between properties and attributes in HTML?）

做到这一点

 strokeColorInput.value = strokeColor;

相反，它似乎工作正常。

【讨论】：

感谢您的解决方案和相关解释！它解决了我的问题。