您的位置:首页 > 教程笔记 > 前端笔记

javascript实现的动态设置元素透明度代码实例

2023-12-04 13:48:20 前端笔记 205

本章节分享一段代码实例,它实现了动态设置元素透明度的效果。

并且能够兼容当前主流的浏览器包括低版本的IE浏览器。

代码实例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="/" />
<title>实例</title>
<style>
#antozne{
  width:200px;
  height:100px;
  background:#191818;
}
</style>
<script> 
window.onload=function(){
  var odiv=document.getElementById("antozne");
  var obt=document.getElementById("bt");
  var alpha=50;
  obt.onclick=function(){
    odiv.style.filter='alpha(opacity:'+alpha+')';
    odiv.style.opacity=alpha/100; 
  }
}          
</script>
</head>
<body>
<div id="antozne"></div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>

相关推荐

  • css鼠标悬浮div背景变色效果

    css鼠标悬浮div背景变色效果

    本章节分享一段代码实例,它实现了鼠标悬浮div背景变色效果。代码非常的简单就是适用:hovr伪类选择器,代码实例如下: chrst

    前端笔记 2023-12-04 13:48:12 116
  • radio美化代码实例

    radio美化代码实例

    rdio单选按钮默认状态下并不美观,但是我们可以通过其他途径将其美化。代码实例如下:

    前端笔记 2023-12-04 13:47:58 91
  • js重置form表单元素值代码实例

    js重置form表单元素值代码实例

    本章节分享一段代码实例,它实现了使用jvscrit重置form表单元素值得功能。代码实例如下:

    前端笔记 2023-12-04 13:47:48 68
  • call()和apply()方法使用代码实例

    call()和apply()方法使用代码实例

    本章节分享几段关于cll()和ly()方法使用的代码实例。需要的朋友可以做一下参考,关于两个方法的基本用法这里不做介绍,可以参阅相关阅读。(1).cll()方法可以参阅js cll()一章

    前端笔记 2023-12-04 13:47:42 148
  • js map集合简单代码实例

    js map集合简单代码实例

    本章节分享一段代码实例,它模拟红丝线了m集合的功能。代码实例如下:vr M = function (){ /************基础变量**************/ vr hs

    前端笔记 2023-12-04 13:47:23 73