2016-03-01 19 views
6

Eğer javascript içinde alfa değerini rgba (r, g, b, a) ile 1'den başka bir değere ayarlarsam, tarayıcı tarafından ayarlanan gerçek değer biraz farklı. Ancak CSS'de ayarlanan değer tam olarak eşleşir. (Chromium) alfa renk değeri (rgba cinsinden) CSS ve javascript

<head>  
     <script type="text/javascript" language="javascript"> 
     window.onload=function() { 
     document.getElementById("p1").style["background-color"]="rgba(255,0,0,0.3)"; 
     } 
     </script> 
    </head> 

    <body> 
     <p>RGB colors with opacity:</p> 
     <p id="p1">Red</p> 
     <p id="p2">Green</p> 
    </body> 
  1. code-pen-site

    kullanım Krom tarayıcı
  2. basın F12 içinde

    bakınız kod örneği Müfettiş

  3. "Kırmızı" kontrol aktif hale getirmek.
  4. "Kırmızı" RGBA (255,0,0,0.3) ayarlanmış arka plan rengi vardır, ama Inspector'da değeri RGBA (255, 0, 0, 0,298039)
  5. "Yeşil" sahip arka plan rengi dizi rgba'ya (0,255,0,0,3) ve Müfettiş değerine uyuyor.

Neden CSS rengi Javascript ile ayarlanırsa numara değişiyor?

+0

, kromun alfa değerinin bir "+/- 0.001961" sabiti ile toplandığı görünmektedir. Tek bir ondalık ile tanımlandığında, daha fazla ondalık değerle birlikte değer tekrar değişir. – fcalderan

cevap

2

İlk olarak, özgün gözlemim yanlış. Arka plan hücresini incelemek için "Computed" sekmesine tıklarsanız, bu fark 'style' etiketinin içindeki CSS kuralları için ve elemanlar içinde satır içi olarak gözlenir. alfa alphaComponent 0.298039 olur, sonra 0.3 ise chromium source code bu uygulama ben

alfa değeri Burada

// Convert the floating pointer number of alpha to an integer in the range [0, 256), 
// with an equal distribution across all 256 values. 
int alphaComponent = 
    static_cast<int>(
     clampTo<double>(alpha, 0.0, 1.0) * nextafter(256.0, 0.0)); 

içinde 0,001961 farkı açıklar. ([0.0, 1.0] 'da herhangi bir kayan noktaya alfa ayarlarsanız, webInspector tarafından gösterilen sayı, yukarıdaki formülden elde edilen alphaComponent değeriyle eşleşir.