CSS浮点与Javascript浮点

我知道时间可能还早，但我现在很困惑。。 我正在CSS中设置rgba a颜色

#body{ color: rgba( 100,100,100,0.3 ) }

当我要求Javascript提供此元素的计算样式时，我得到以下结果：

window.getComputedStyle(document.body)['color']
//rgba(100, 100, 100, 0.298039)

我期待的是RGBA100100,0.3

我的问题：为什么

---

这是怎么可能的？我该如何解决这个问题？

在大多数语言（包括javascript）中，浮点是不精确的。由于浮点数的存储方式，许多数字（如0.3）无法精确表示。如果要比较两个浮点数，典型的方法是在比较之前将它们四舍五入到小数点后两位，任何差异都将在四舍五入过程中消失

此外，由于小的不透明度值（超过两位小数点后）之间没有明显差异，因此浏览器可能使用更少的位来存储不透明度，从而导致精度甚至低于正常javascript浮点值

如果有理由存储精确值并保留该精确值，则将数字转换为字符串并将该字符串存储在对象的自定义特性中。该属性将精确保留字符串值。如果您将该字符串转换回浮点，您仍然需要接受浮点精度的限制，但它应该比您看到的不透明度值更精确

---

由于不透明度0.3和0.298039之间没有明显的区别，您能描述一下问题的实质吗？

大多数语言（包括javascript）中的浮点值并不精确。由于浮点数的存储方式，许多数字（如0.3）无法精确表示。如果要比较两个浮点数，典型的方法是在比较之前将它们四舍五入到小数点后两位，任何差异都将在四舍五入过程中消失

此外，由于小的不透明度值（超过两位小数点后）之间没有明显差异，因此浏览器可能使用更少的位来存储不透明度，从而导致精度甚至低于正常javascript浮点值

如果有理由存储精确值并保留该精确值，则将数字转换为字符串并将该字符串存储在对象的自定义特性中。该属性将精确保留字符串值。如果您将该字符串转换回浮点，您仍然需要接受浮点精度的限制，但它应该比您看到的不透明度值更精确

由于不透明度为0.3和0.298039之间没有明显差异，您能描述一下问题的实质吗？

rgba规范的所有字段似乎都在内部转换为8位字节。0.3变为0.3*255=76。将其转换回rgba格式时，将计算76/255=0.298039。因为它不是以十进制或浮点形式存储的，所以在这个过程中会丢失精度-它无法知道原始设置是什么

显示器的实际外观没有差别，因为内部8位alpha是渲染时实际使用的。rgba规范的所有字段似乎在内部转换为8位字节。0.3变为0.3*255=76。将其转换回rgba格式时，将计算76/255=0.298039。因为它不是以十进制或浮点形式存储的，所以在这个过程中会丢失精度-它无法知道原始设置是什么

---

---

显示器的实际外观没有区别，因为渲染时实际使用的是内部8位alpha。

你能说出0.3和0.298039之间的区别吗？@Barmar这不是重点。OP想知道这是怎么发生的，为什么会发生。@Aquillo-他们还问如何解决这个问题。我们需要知道实际的问题是什么，如果它导致了问题。是的，我想说的是忽略问题并不能解决问题。@Aquillo-如果它根本没有导致任何问题，那么忽略它就好了。你能告诉我0.3和0.298039之间的区别吗？@Barmar这不是重点。OP想知道这是怎么发生的，为什么会发生。@Aquillo-他们还问如何解决这个问题。我们需要知道什么是真正的问题，如果它导致了他们。是的，我想说的是忽略问题并不是解决问题。@Aquillo-如果它实际上没有导致任何问题，那么忽略它就好了。这是真的，但通常差异类似于小数点后第7位或第8位。@Barmar-我不知道为什么会有这么大的差异。@Aquillo Javascript浮点数应该是64位浮点。@Aquillo-Javascript浮点数已经是两倍了。这可能与浏览器如何在内部存储不透明度数字有关，而不是javascript特有的问题。@Aquillo-更正。没有更多的选择

---

精确而且，我们也可以看出原因，因为浏览器只是在浪费存储空间，以获得不可能看得见的精度。Barmar的猜测可能是正确的-浏览器可能使用更紧凑的格式来存储精度更低的不透明度值。没错，但通常差异类似于小数点后第7位或第8位。@Barmar-我不知道为什么会有这么大的差异。@Aquillo Javascript浮点数应该是64位浮点。@Aquillo-Javascript浮点数已经是两倍了。这可能与浏览器如何在内部存储不透明度数字有关，而不是javascript特有的问题。@Aquillo-更正。没有比这更精确的选择了。而且，我们也可以看出原因，因为浏览器只是在浪费存储空间，以获得不可能看得见的精度。Barmar的猜测可能是正确的-浏览器可能使用更紧凑的格式来存储精度更低的不透明度值。不，但是如果我想检查RGBA颜色，a可以进行相同的计算以匹配css。谢谢+1用于实际解释此处发生的根源！这很有趣。不，但是如果我想检查RGBA颜色，a可以进行相同的计算以匹配css。谢谢+1用于实际解释此处发生的根源！看看这是怎么回事很有趣。