返回列表 回复 发帖

[JavaScript] js 设置或获取CSS opacity透明

css 代码
  1. {
  2.     filter:alpha(opacity=30);
  3.     opacity:.3;
  4. }
复制代码
  1. //设置CSS opacity 属性的函数,解决IE8的问题
  2. var setOpacity = function(el,i){
  3.   if(window.getComputedStyle){// for non-IE
  4.     el.style.opacity = i;
  5.   }else if(document.documentElement.currentStyle){ // for IE
  6.     if(!el.currentStyle.hasLayout){
  7.       el.style.zoom = 1;
  8.     }
  9.     if(!el.currentStyle.hasLayout){ //在IE8中zoom不生效,所以再次设置inline-block
  10.       el.style.display = 'inline-block';
  11.     }
  12.     try{
  13.       //测试是否已有filter
  14.       //http://msdn.microsoft.com/en-us/library/ms532847%28VS.85%29.aspx
  15.       if(el.filters){
  16.         if(el.filters('alpha')){
  17.           el.filters('alpha').opacity = i * 100;
  18.         }else{
  19.           el.style.filter += 'alpha(opacity='+ i * 100 +')';
  20.          }
  21.        }
  22.     }catch(e){
  23.       el.style.filter = 'alpha(opacity='+ i * 100 +')';
  24.     }
  25.   }
  26. }

  27. //获取CSS opacity 属性值的函数
  28. //借鉴自http://developer.yahoel.com/yui/docs/YAHOO.util.Dom.html#method_getStyle
  29. var getOpacity = function(el){
  30.   var value;
  31.   if(window.getComputedStyle){
  32.     value = el.style.opacity;
  33.     if(!value){
  34.       value = el.ownerDocument.defaultView.getComputedStyle(el,null)['opacity'];
  35.     }
  36.     return value;
  37.   }else if(document.documentElement.currentStyle){
  38.     value = 100;
  39.     try { // will error if no DXImageTransform
  40.         value = el.filters['DXImageTransform.Microsoft.Alpha'].opacity;
  41.     } catch(e) {
  42.         try { // make sure its in the document
  43.             value = el.filters('alpha').opacity;
  44.         } catch(err) {
  45.         }
  46.     }
  47.     return value / 100;
  48.   }
  49. }
复制代码
  1.                 var setOpacity = function(el,i){

  2.                         if(document.addEventListener){
  3.                             el.style.opacity = i;
  4.                             return;
  5.                         }

  6.                         el.style.filter = 'alpha(opacity='+ i * 100 +')';
  7.                 }

  8.                 var getOpacity = function(el){

  9.                         var value;

  10.                         if(document.addEventListener){
  11.                             value = el.style.opacity;
  12.                             // if(!value){
  13.                             //   value = el.ownerDocument.defaultView.getComputedStyle(el,null)['opacity'];
  14.                             // }
  15.                             return value;
  16.                         }

  17.                         var ary = el.style.filter.match(/alpha\(opacity:(.*)\)/);

  18.                         value = ary ? ary[1] : 100;

  19.                         return value / 100;
  20.                      

  21.                     };
复制代码
document.addEventListener只有IE9+及现代浏览器支持;

opacity只有IE9+及现代浏览器支持;
  1. 'opacity' in document.body.style
复制代码
应该也是可以的
返回列表