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

最新推荐文章于 2025-05-15 19:34:59 发布

____噓丶低調

最新推荐文章于 2025-05-15 19:34:59 发布

阅读量948

点赞数

分类专栏： JS 文章标签： firefox ie javascript css class filter

JS 专栏收录该内容

9 篇文章

订阅专栏

[记录]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() {
		//设置IE
		var 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";
		
		//设置firefox
		var 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>