CSS opacity defined at 0.3 but set at 0.30000001192092896

I have an <input> element for which I set 开发者_如何学运维opacity: 0.3. However, when I check the actual value I get 0.30000001192092896. See http://jsfiddle.net/85EPf/2/

Why do I get this discrepancy? If this is not a bug, how can I predict the discrepancy for other values?

---

This is yet another floating-point vs. decimal number rounding issue. See "What Every Computer Scientist Should Know About Floating-Point Arithmetic".

You don't really need to be concerned with the discrepency. Just know that for floating point numbers, you can't express 0.3 exactly. 0.30000001192092896 is close enough.

---

Floating point numbers represented in binary inside computers are not exact. Your value 0.30000001192092896 is the closest the computer can come to representing 0.3 in binary.

---

As the others said, this is the result of the fact that floating-point numbers are approximations in JS (and almost all other computer languages.)

If you want to test the opacity against a value, first decide how close is close enough. For example, this tests to see if it's equal to 0.3, within 3 decimal places:

if (300 == Math.round (opactityVal * 1000) ) {
    //-- Do something here.
}

See, also, Minimizing the effect of accuracy problems.