IE中透明度的读写

Posted 2020-07-16 很好玩的博客

一、获取透明度

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+")";
    }