立即登录 马上注册
首页 › 开发帮助文档 › 开发技术 › JavaScript怎样实现点击出现图片效果

赞

评论

收藏

[JavaScript] JavaScript怎样实现点击出现图片效果

开发技术 开发技术 发布于：2023-02-04 14:01 | 阅读数：223 | 评论：0

实现方法：1、给按钮绑定点击事件并指定一个事件处理函数；2、在事件处理函数中利用“document.getElementById("图片id值").style.display="block";”语句设置点击按钮图片显示即可。
在JavaScript中可以先给按钮绑定点击事件并且制定一个时间处理函数，在事件处理函数中改变图片元素的display属性即可实现点击按钮出现图片，示例如下：
<!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>
   img{
    display:none;
   }
   </style>
</head>
<body>
   <button onclick="showimg()">显示图片</button>
   <img src="1118.02.png" id="test">
   <script>
   function showimg(){
    document.getElementById('test').style.display="block";
   }
   </script>
</body>
</html>
输出结果：
20220215000119-620aed4f2722f.gif


关注下面的标签，发现更多相似文章
免责声明：

1. 本站所有资源来自网络搜集或用户上传，仅作为参考不担保其准确性！

2. 本站内容仅供学习和交流使用，版权归原作者所有！© 查看更多

3. 如有内容侵害到您，请联系我们尽快删除，邮箱：kf@codeae.com

分享到： QQ好友和群QQ好友和群 QQ空间QQ空间

举报

返回列表
相关帖子
avatar
112251 经验
193 文档
OPNE在线字典
  • 手机版| 免责声明|
2021-2024  版权所有：CodeAE代码之家   
粤ICP备2023096576号-2