JavaScript округление до 1 десятичного знака в атрибуте встроенного стиля

Question

У меня есть функция, которая генерирует случайный цвет RGBA, и если я зарегистрирую ее на консоли, она округляется до десятичной точки (это то, что я хочу), но если вы откроете консоль и попробовать это как встроенный атрибут стиля для элемента body, вы можете видеть, что он не округляется до одного десятичного места? В чем проблема ?

JSFIDDLE(backgroundColor)

setInterval(function foo(){ 
    document.body.style.backgroundColor = ("rgba(" + Math.round(Math.random() * 255) + "," + Math.round(Math.random() * 255) + "," + Math.round(Math.random() * 255) + "," + Math.random().toFixed(1)) + ")"; 
},1000); 

JSFIDDLE(console.log)

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); 

Если сравнить эти два скрипках вы можете увидеть difference.So почему они отличаются? Это же функция, и она должна быть такой же, верно?

Answer 1

Браузер внутри хранит альфа-значение как 1 байт, а не как float. Когда, например, вы сказать вам нужен 0.5 альфа, браузер преобразует, что в 1 байтовое целое число, используя это:

Math.floor(255 * 0.5) 

При запросе результат обратно, он Виль преобразовать это целое число обратно в 0-1 диапазоне путем деления с 255.

Это приведет к неправильной альфа. Я проверил это с помощью этого:

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 = Math.floor(255 * 0.5)/255; (конечно, с некоторым округлением)