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设置元素透明度就介绍到这了。