IE中透明度的读写

一、获取透明度

ele.filters.alpha

返回元素所有滤镜的对象,可在此基础上获取opacity即可。

  但是似乎ele.filters只能存储第一个滤镜,而当我们把alpha放在第二位时,就无法获取到了,下面是验证。

#q{
            font-size:20px;
            float:left;
            filter:alpha(opacity=50),DropShadow(Color=black, OffX=10px, OffY=10px, Positive=positive);
}

console.dir(q.currentStyle.filter);
console.dir(q.filters);

结果如下:

  所以,我们尽量使用style.filter获取字符串操作吧!

二、设置透明度

  设置透明度有点麻烦,我们需要解决以下三个问题:

  1.   用户传入值乘以100
  2.   IE6、7下,元素只有触发haslayout才能使透明度生效
  3.   IE8下,透明度设置为100会使文本模糊,需要清楚该滤镜

问题解决:

1.第一个问题,解决起来比较简单,代码如下

value=(value>0.999)?100:(value<0.001)?0:value*100

2.第二个问题,我们检测元素是否触发了haslayout,如果没有,将他的zoom属性设置为1

3.第三个问题,当存在多个滤镜的时候,我们只清掉透明部分

var rfilters=/[w:.]+([^)]+])/g;
    var filter=ele.currentStyle.filter||ele.style.filter||"";
    value=style.filter=filter.replace(rfilters,function(a){
        return /alpha/i.test(a)?"":a;
})

  解决完了上述问题,我们就可以正式来设置啦!首先如果我们的opacity可以用node.filters获取到,我们就可以直接设置;如果不能,我们就只能用字符串的方法了。

var alpha=ele.filters.alpha||ele.filters[salpha];//ele.filters[salpha]为了照顾其他两种很长的设置透明滤镜的方法,这里就懒得写了
    if(alpha){
        alpha.opacity=value;
    }else{
        el.style.filter=(el.style.filter?el.style.filter+",":"")+"alpha(opacity="+value+")";
    }
原文地址:https://www.cnblogs.com/shytong/p/5539945.html