JavaScript在内联样式属性上舍入到小数点后1位

我有一个生成随机RGBA颜色的函数，如果我将它记录到控制台，它将舍入到小数点位（这是我想要的），但如果打开控制台并尝试将其作为body元素上的内联样式属性，您可以看到它没有舍入到小数点位吗？问题在哪里

JS

setInterval(function foo (){
  console.log(("rgba(" + Math.round(Math.random() * 255) + "," + Math.round(Math.random() * 255) + "," + Math.round(Math.random() * 255) + "," + Math.random().toFixed(1)) + ")");
},1000);

---

如果你比较这两把小提琴，你会发现它们的不同。那么为什么它们不同呢？它是相同的函数，应该是相同的，对吗？

浏览器内部将alpha值存储为1字节，而不是浮点数。例如，当您说需要0.5 alpha时，浏览器会使用以下命令将其转换为1字节整数：

Math.floor(255 * 0.5)

rgba(134,78,73,0.5) //the color outputed by javascript
rgba(134, 78, 73, 0.498039) //the color that was read back from the style

当您查询回结果时，它将用255除法将该整数转换回0-1范围

这将导致错误的alpha。我已经使用以下方法对此进行了测试：

Math.floor(255 * 0.5)

rgba(134,78,73,0.5) //the color outputed by javascript
rgba(134, 78, 73, 0.498039) //the color that was read back from the style

---

0.498039=数学地板（255*0.5）/255（当然有一些舍入）
在浏览器中如何将其转换为一个小数点？有可能吗？很遗憾，这是不可能的，因为阿尔法通道的分辨率不允许这样做。但是请记住，您不应该从DOM读回值，因为不能保证您将收到与设置相同的值。例如，通过设置“rgb（255、255、255）”，浏览器可能会报告回rgba，或“#FFFFFF”甚至“白色”。您应该将设置的值存储在应用程序中的某个位置。