一、获取透明度
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获取字符串操作吧!
二、设置透明度
设置透明度有点麻烦,我们需要解决以下三个问题:
- 用户传入值乘以100
- IE6、7下,元素只有触发haslayout才能使透明度生效
- 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+")"; }
时间: 2024-10-28 02:39:30