2013-05-07 4 views
1

나는 일찍 수 있습니다 알고 있지만, 나는 저를주는 자바 스크립트를 요청할 때 나는 ... 지금 내가 CSSCSS 플로트

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

에서 RGBA에게 색상을 설정하고있어 을 꽤 혼란 스러워요 이 요소의 계산 된 스타일은,이 얻을 :

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

내가 rgba(100,100,100,0.3)을 기대하고 있습니다 곳.

내 질문 : 이유가 무엇입니까?

어떻게 가능하며이 문제를 해결하려면 어떻게해야합니까?

+2

0.3과 0.298039의 차이점을 알 수 있습니까? – Barmar

+0

@Barmar 그건 요점이 아닙니다. OP는 이것이 어떻게 일어나고 왜 있는지를 알고 싶어합니다. – Aquillo

+1

@Aquillo - 그들은 또한 그것을 해결하는 방법을 묻습니다. 우리는 실제 문제가 무엇인지 알 필요가있다. –

답변

8

rgba() 사양의 모든 필드는 내부적으로 8 비트 바이트로 변환 된 것처럼 보입니다. 0.3round(0.3 * 255) = 76이됩니다. 이것을 rgba 형식으로 변환하면 76/255 = 0.298039이됩니다. 10 진수 또는 부동 소수점으로 저장되지 않으므로이 과정에서 정밀도가 떨어집니다. 원래 설정이 무엇인지 알 수있는 방법이 없습니다.

내부 8 비트 알파가 렌더링시 실제로 사용되기 때문에 디스플레이의 실제 모양에는 차이가 없습니다.

+0

클리어 .. 매우 깨끗함 – HerrWalter

+0

아니요,하지만 RGBA 컬러를 확인하고 싶은 경우 CSS와 일치하는 동일한 교정을 할 수 있습니다. 감사! – HerrWalter

+0

+1 실제로 여기에서 발생의 뿌리를 설명하기 위해 +1! 이것이 어떻게 작동하는지 보아 흥미 롭습니다. – Aquillo

3

javascript를 포함한 대부분의 언어에서 부동 소수점은 정확하지 않습니다. 0.3과 같은 많은 수는 부동 소수점 숫자가 저장된 방식으로 정확하게 표현 될 수 없습니다. 두 개의 부동 소수점 수를 비교하려면 비교하기 전에 소수점 이하 자릿수로 반올림하고 반올림시 차이점이 사라지게하는 일반적인 방법이 있습니다.

불투명도가 작은 값 사이에는 눈에 띄는 차이가 없기 때문에 브라우저는 불투명도를 저장하는 비트 수가 더 적어서 일반 자바 스크립트 부동 소수점보다 정확도가 떨어집니다 값.

정확한 값을 저장하고 그 정확한 값을 유지해야하는 경우 숫자를 문자열로 변환하고 문자열을 개체의 사용자 지정 속성에 저장하십시오. 속성은 문자열 값을 정확하게 유지합니다. 해당 문자열을 부동 소수점으로 다시 변환하면 여전히 부동 소수점 정확도의 한계를 따라 살아야하지만 불투명도 값보다 훨씬 정확해야합니다.

불투명도가 0.3과 0.298039 사이에 눈에 띄는 차이가 없으므로 문제가 실제로 무엇인지 설명 할 수 있습니까?

+0

사실 그렇지만 보통 차이점은 소수점 7 위 또는 8 위와 같습니다. – Barmar

+0

@Barmar - 왜 이렇게 많은 차이가 있는지 모르겠습니다. – jfriend00

+0

@Aquillo Javascript 부동 소수점은 64 비트 부동 소수점으로 간주됩니다. – Barmar