firefox与IE透明度(opacity)设置区别

来源：互联网发布：易到专车比价软件编辑：程序博客网时间：2024/06/02 13:20

[记录]firefox与IE透明度(opacity)设置区别

关键字: javascript, css, opacity

1.IE6设置透明度

css设置

filter:alpha(opacity=50);

javascript设置

ieSpanJs.style.filter="alpha(opacity=50)";

2.firefox3.5设置透明度

firefox3.5支持css3，已经不对原来的透明度样式(-moz-opacity)提供支持（网上查的），在本人的firefox3.5.5上测试后，发现确实如此，现在的透明度设置为：

css设置

opacity:0.5;

javascript设置

firefox35SpanJs.style.opacity="0.5";

3.firefox3.5以前版本设置透明度

css设置

-moz-opacity:0.5;

javascript设置

firefoxSpanJs.style.mozOpacity="0.5";

4.demo代码

<HTML> <HEAD> <style type="text/css"> .ieCss {display:-moz-inline-box;display:inline-block;width:100;height:100;background-color:red;filter:alpha(opacity=50); } .fireFox35Css {display:-moz-inline-box;display:inline-block;width:100;height:100;background-color:blue;opacity:0.5; } .fireFoxCss {display:-moz-inline-box;display:inline-block;width:100;height:100;background-color:yellow;-moz-opacity:0.5; } </style>   <script>window.onload = function() {//设置IEvar ieSpanJs = document.getElementById("ieSpanJs");ieSpanJs.style.display = "inline-block";  //ie支持ieSpanJs.style.width = 100;ieSpanJs.style.height = 100;ieSpanJs.style.backgroundColor = "red";ieSpanJs.style.filter="alpha(opacity=50)";//设置firefox3.5.*var firefox35SpanJs = document.getElementById("firefox35SpanJs");try{firefox35SpanJs.style.display = "-moz-inline-box"; //firefox支持}catch (e){firefox35SpanJs.style.display = "inline-block"; //支持IE}firefox35SpanJs.style.width = 100;firefox35SpanJs.style.height = 100;firefox35SpanJs.style.backgroundColor = "blue";firefox35SpanJs.style.opacity="0.5";//设置firefoxvar firefoxSpanJs = document.getElementById("firefoxSpanJs");try{firefoxSpanJs.style.display = "-moz-inline-box"; //firefox支持}catch (e){firefoxSpanJs.style.display = "inline-block"; //支持IE}firefoxSpanJs.style.width = 100;firefoxSpanJs.style.height = 100;firefoxSpanJs.style.backgroundColor = "yellow";firefoxSpanJs.style.mozOpacity="0.5"; }  </script>  </HEAD>  <BODY>  <span id="ieSpanCss" class="ieCss">IE_css</span>  <span id="firefox35SpanCss" class="fireFox35Css">firefox3.5_css</span>  <span id="firefoxSpanCss" class="fireFoxCss">firefox_css</span>  <br>  <br>  <span id="ieSpanJs">IE_Js</span>  <span id="firefox35SpanJs">firefox3.5_Js</span>  <span id="firefoxSpanJs">firefox_Js</span> </BODY></HTML>