javascript相容所有瀏覽器設定元素透明度程式碼例項

antzone發表於2017-04-07
JavaScript瀏覽器

本章節介紹一下如何實現相容所有瀏覽器的設定透明度效果。

由於低版本IE瀏覽器的特立獨行，所以稍微麻煩了一步，當然總體上看是非常的簡單的。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#antzone{
  width:200px;
  height:100px;
  background:#090808;
}
</style>
<script type="text/javascript">
function done(obj,iAlpha){
  obj.style.filter="alpha(opacity="+iAlpha+")";
  obj.style.opacity=iAlpha/100;
}
window.onload=function(){
  var obt=document.getElementById("bt");
  var odiv=document.getElementById("antzone");
  obt.onclick=function(){
    done(odiv,60);
  }
}
</script>
</head>
<body>
<div id="antzone"></div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

上面的程式碼實現了我們的要求，下面簡單做一下說明:

在表中瀏覽器中，使用如下方式:

[JavaScript] 純文字檢視 複製程式碼
obj.style.opacity=0.6

值是一個0-1的數字，但是在低版本的IE瀏覽器中需要使用如下方式:

[JavaScript] 純文字檢視 複製程式碼
obj.style.filter="alpha(opacity=60)"

數字是一個0-100的值，非常的簡單，這裡就不多說了。

相關文章