javascript - 和的颜色页面上的元素与其 value 属性不匹配

Question

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

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

现场观看：

1. 直播：https ://argonathmos.github.io/SVGfun/

2. 代码： https ://github.com/argonathmos/SVGfun

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

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

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

• 当我单击“随机”时，SVG 颜色以及<input type="color">元素的值以及页面上元素的颜色都会更新（即小方块颜色与相关 SVG 部分的颜色匹配）。

• 当我通过<input type="color">元素单独应用颜色时，SVG 的颜色以及<input type="color">元素的值都会更新，页面上输入颜色元素的颜色（小方块）也会更新。

• 但是，如果我在手动从颜色选择器中选择了一种颜色后单击“随机”：SVG 颜色已更新，<input type="color">元素的 value 属性也已更新，但页面上元素的颜色不会更新其停留与之前手工挑选的颜色相同。（即小方块颜色与相关 SVG 部分的颜色不匹配，即使元素的 value 属性匹配。）

标签： javascripthtml

Answer 1

问题似乎是，您正在使用

 strokeColorInput.setAttribute('value',strokeColor);

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

（这大概是这里众所周知的attribute vs property问题/issue的体现，请看HTML中的properties和attributes有什么区别？）

做那个

 strokeColorInput.value = strokeColor;

相反，它似乎工作正常。