JavaScript設定元素透明度

admin發表於2018-03-28
JavaScript

在實際應用中，可能需要動態的設定標籤的透明度，現在就以div為例子介紹一下如何實現此效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<style type="text/css">
#box{
  width:300px;
  height:300px;
  background:red;
  margin:0px auto;
  overflow:hidden;
}
#inner{
  width:50px;
  height:50px;
  background:green;
  margin:0px auto;
  margin-top:125px;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
  var inner=document.getElementById("inner");
  if(document.all){
    inner.style.filter='alpha(opacity=50)'; 
  }
  inner.style.opacity="0.5";
}
</script> 
</head> 
<body> 
<div id="box">
  <div id="inner"></div>
</div>
</body> 
</html>

以上程式碼實現了預期效果，更多內容參閱CSS 透明度詳解一章節。

相關文章