opacity--css + javascript兼容性代码

css设置opacity

之前看了别人写了一段关于opacity的css代码，没深入理解就copy过来自己用了一段时间，现在重新拿出来又深入研究了一下。

.cla{
    /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 50;

  /* Safari 1.x */
  -khtml-opacity: 50;

  /* Good browsers */
  opacity: 50;
} 

我们知道opacity在IE9+中是完全支持的。

opacity	IE6	IE7	IE8	IE9	IE10
	NO	NO	NO	YES	YES

/* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

这行代码是为了解决IE8滤镜的问题，这行代码经过测试仅在IE8,和IE9中起作用

-ms-filter	IE6	IE7	IE8	IE9	IE10
	NO	NO	YES	YES	NO

参考IE官网资料，可以看到Alpha Filter在IE9之后的版本就不在支持了，语法如下：

HTML	<ELEMENT STYLE= "filter:progid:DXImageTransform.Microsoft.Alpha(sProperties)" ... >	Internet Explorer 5.5 or later
Scripting	object .style.filter = "progid:DXImageTransform.Microsoft.Alpha(sProperties)"	Internet Explorer 5.5 or later

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);在IE浏览器版本支持情况如下：

filter	IE6	IE7	IE8	IE9	IE10
	YES	YES	YES	YES	NO

所以为了支持IE8及IE8之前的版本不支持opacity的问题，可以这样写：

.cla{
    /* IE 5-8 */
  filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* Good browsers */
  opacity: 50;
} 

 

接下来我们来看filter: alpha(opacity=50);

filter: alpha(opacity=50);在IE浏览器支持情况如下：

filter	IE6	IE7	IE8	IE9	IE10
	YES	YES	YES	YES	NO

可以看到，filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";和filter: alpha(opacity=50);在IE浏览器中支持情况是一样的。但是filter: alpha(opacity=50);这种语法我没有查到相关资料。
所以为了支持IE8及IE8之前的版本不支持opacity的问题，也可以这样写：

.cla{
  /* IE 5-8 */
  filter: alpha(opacity=50);

  /* Good browsers */
  opacity: 50;
} 

 

接下来我们来看看怎么用JavaScript改变opacity的值:

var opacityValue = 0.5; // 值为0.5
myElement.style.opacity = opacityValue ; //Good browsers

myElement.style.filter = "alpha(opacity=" + opacityValue*100 + ")"; // IE5-8

//下面这些情况可以不用考虑
myElement.style.MozOpacity   = opacityValue ;
myElement.style.opacity      = opacityValue ;
myElement.style.KhtmlOpacity = opacityValue ;