不透明度值显示为字符串而不是数字答案

【问题标题】：Opacity value displayed as string instead of number不透明度值显示为字符串而不是数字
【发布时间】：2021-07-11 14:38:41
【问题描述】：

我有一个使用反应钩子的简单不透明度滑块，看起来像这样

我在这样的表格中设置不透明度

<td>
<img
   src="link"
   opacity={data.socialOpacity}
   }
   />
</td>

但是当我运行我的应用程序时，DOM 中的不透明度显示为这样的字符串

<img src="https://wp-iframe.icon.webp" color="#000" opacity="1">

为什么不透明度值显示为字符串而不是数字？

【问题讨论】：

没有数字属性值。
HTML 是一种与 JavaScript 完全不同的“语言”。属性值始终是文本或“字符串”，就像在 JavaScript 或其他语言的上下文中所说的那样。
这看起来像 HTML 而不是 DOM（前者通常用于生成后者）。 HTML 没有类型，它不是一种编程语言。
另外<img> 元素无论如何也不接受“不透明度”属性。
这里尝试使用的不透明度可能会有些混淆，这将适用于 SVG 元素但不适用于 HTML 元素 - 请参阅 [link]developer.mozilla.org/en-US/docs/Web/SVG/Attribute/opacity 和应用于 HTML img 元素的 CSS 不透明度。

【解决方案1】：

一些注意事项：

<div style={ {opacity: data.socialOpacity, color: "#111"} } >...</div>

【讨论】：