javascript - 页面上 <input type ="color"> 元素的颜色与其 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. 三<input type="color"> SVG 的每个部分的元素 手动修改每种颜色。
3. 下载按钮，允许 用户导出应用了自定义颜色的 SVG。

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

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

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

• 但是如果我在手动从颜色选择器中选择颜色后单击“随机”: SVG 颜色已更新，<input type="color"> 的 value 属性元素也是如此，但页面上元素的颜色不会更新为与之前手动选择的颜色相同。 (即小方 block 颜色与关联 SVG 部分的颜色不匹配，尽管元素的 value 属性匹配。)

Answer 1

问题似乎在于您正在使用

 strokeColorInput.setAttribute('value',strokeColor);

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

(这可能是众所周知的属性与属性问题的表现，请参阅 What is the difference between properties and attributes in HTML? )

做到这一点

 strokeColorInput.value = strokeColor;

相反，它似乎工作正常。