用JavaScript实现元素点击后出现的方法是什么
Admin 2022-05-19 群英技术资讯 711 次浏览
实现方法:1、给按钮绑定点击事件并指定一个事件处理函数;2、在事件处理函数中利用“document.getElementById(出现元素对象).style.display="block";”语句设置点击按钮元素显示即可。
本教程操作环境:windows10系统、javascript1.8.5版、Dell G3电脑。
JavaScript怎样实现点击出现效果
先创建一个按钮并且给按钮绑定事件处理函数,在事件处理函数中可以实现元素显示效果。
示例如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ width:200px; height:200px; background:red; display:none; } </style> </head> <body> <button onclick="showimg()">显示图片</button> <div id="test"></div> <script> function showimg(){ document.getElementById('test').style.display="block"; } </script> </body> </html>
输出结果:
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章主要为大家详细介绍了Vue实现随机验证码功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
input输入框禁止输入空格字符的正则表达式用于防止别人随意乱提交数据,禁止输入空格字符只需要使用js正则表达式即可,无需写任何js函数,如下。 inputtype=textname=userNameonkeyup=this.value=this.value.replace(/\s+/g,) 只需要在input中加入onkeyup=th
本文实例为大家分享了微信小程序实现轮播图指示器的具体代码,供大家参考,具体内容如下1.文件目录2.轮播图页面布局需求:自定义轮播指示器:当轮播图发生变化时,自定义轮播指示器跟随图片发生对应改变bindchange:current 改变时会触发 change 事件,即当图片索引发生变化时触发的事件current:当前所在
最近项目中使用了minio作为静态资源管理服务,所以简单写一下如何通过minio来上传图片,下面这篇文章主要给大家介绍了关于Vue中通过minio上传文件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
这篇文章主要介绍了vscode中console.log的两种快速写法,每种方法通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008