JavaScript设置元素透明度

快乐打工仔 分类:实例代码

JavaScript设置元素透明度属于前端实例代码,有关更多实例代码大家可以查看

在实际应用中,可能需要动态的设置标签的透明度,现在就以div为例子介绍一下如何实现此效果。

代码实例如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.pipipi.net/" /> 
<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 透明度详解一章节。

JavaScript设置元素透明度,这样的场景在实际项目中还是用的比较多的,关于JavaScript设置元素透明度就介绍到这了。

回复

我来回复
  • 暂无回复内容