Come ottenere il valore esatto di RGBa impostato tramite CSS tramite Javascript?

Question

Nella maggior parte dei browser che ho provato, i valori RGBa sembrano essere modificati una volta che il browser ha analizzato i CSS.

Ad esempio, il seguente CSS:

background-color: rgba(255, 0, 0, 0.5); 

Dà il seguente valore CSS quando vi si accede tramite jQuery.css ('background-color') o CSSStyleDeclaration.getPropertyValue nativo ('background-color'):

rgba(255, 0, 0, 0.498039) 

Ecco un violino con altri esempi: http://jsfiddle.net/hgFEj/3/

Chrome e Safari dare risultati diversi. Firefox sembra essere l'unico browser che riporta il valore esatto inserito. È un bug o di progettazione?

Answer 1

Il commento di Mark Hubbart è corretto.

32 bit colore si suddivide in quattro componenti a 8 bit, ciascuno nell'intervallo 0-255: rosso, verde, blu e alfa. Esprimiamo la alpha o trasparenza, come frazione o percentuale poiché ci aiuta a capire che la gente decimata ha un'idea più rapida di quanto sia trasparente. In realtà è meglio pensato come opacità (pure, opacità) dal 100% trasparente è 0, non 1.

Ora, data 255 è il denominatore per la valore alfa, non c'è modo per esprimere 0.5 Esattamente. Il valore che stai vedendo, 0.498039, deriva dalla frazione più vicina, 127/255 (arrotondata a 6 posizioni decimali). Safari restituisce 0.496094 che è 127/256 arrotondato a 6 cifre decimali, e per me sembra un errore poiché implica 257 valori. Dubito anche che Firefox possa riportare accuratamente 0.5 a meno che non sia arrotondato a solo 2 posizioni decimali.

È possibile aggirare questo problema in diversi browser creando un plug-in jQuery che, alla prima esecuzione, controlla per vedere quale valore viene restituito con un alfa al 50% e regola di conseguenza tutti i calcoli.

parseFloat(
    $('#divWith50PercentAlphaBackgroundStyle') 
     .css('background-color') 
     .split(',')[3], 
    10 
) 

Poi, con questo valore in mano, fare un switch su di esso contro i valori di diversi browser restituiscono, e adeguatamente convertire il valore corretto più vicino vi aspettate.