Questions and solutions about CSS settings and getting element opacity

For the browser to the element opacity degree opacity support and how to set, I believe everyone is familiar with. This is no longer analyzed.

Simply, to support mainstream browsers, you need to set both the IE-specific filter and the Opacity property of the Web Standard.

Example: Set the opacity to 20%

Filter:alpha (OPACITY=20);

opacity:0.2;

I need to focus on the issue of CSS opacity through JS acquisition.

First, after a large number of effective analysis of my test results:

IE5-IE8 only supports the filter filter setting CSS opacity, does not support the Opacity property setting CSS Opacity

IE9 supports both the filter filter setting CSS opacity and the Opacity property setting CSS Opacity

Ie10+ does not support the filter filter setting CSS opacity, only the Opacity property setting CSS Opacity

Firefox Chrome Safari Opera does not support setting CSS opacity on the filter filter, only supports Opacity property setting CSS Opacity

Ie9+ supports Currentstyle, also supports Document.defaultView.getComputedStyle

IE5-IE8 supports Currentstyle, does not support Document.defaultView.getComputedStyle

Non-IE does not support currentstyle, only supports Document.defaultView.getComputedStyle

IE supports getting CSS user-defined properties, but can only be returned by accessing Currentstyle, while access Document.defaultView.getComputedStyle cannot get custom properties

Get CSS Custom properties is not supported for non IE

Therefore, when using JS to get the Opacity property, because the default Opacity property value is 1, but IE8 and the following version is not supported, it returns undefined, and other browsers that support this property return 1.

So in the example above, set the opacity to 20% opacity, then we have to use IE support currentstyle to get the value of the filter: Alpha (OPACITY=20), in the regular expression to get a value of 20, Multiplied by 0.01 to get the correct value of 0.2,

For browsers that are not IE and support opacity, you can get them directly.

But

One thing to note here is that the floating-point number of the return value is not equal to the set value.

Set up opacity:0 in the 3 largest browsers of Chrome Safari Opera. 2, when we use JS to get opacity is worth the time to return is not 0.2, but a very long floating-point number of about 0.2, browser testing at this time to determine whether the return value equals 0.2, get false.

I did not find the reason for this problem, but in these 3 large browsers do exist, the return value and set the value of a small error, I guess this may be the way to get CSS through the computed style, where the floating-point arithmetic inside the browser has errors.

So you can use the 0.01*math.round (100*css.opacity) method to process the return value to get the correct value.

There are no such problems in IE and Firefox, they all return the values set.

The above is my little experience, very happy to share with you!

Questions and solutions about CSS settings and getting element opacity