關鍵字: 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>
