JavaScript实现显示和隐藏图片


Posted in Javascript onApril 29, 2021

JavaScript之显示和隐藏图片,供大家参考,具体内容如下

点击按钮可以显示和隐藏图片(默认显示),附上代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示和隐藏图片</title>
</head>
<body>
    <button id="btn">隐藏</button>
    <br>
    <img src="img/image01.jfif" id="newGirlFriend">
    <script type="text/javascript">
        // 1.获取事件源
        var obtn = document.getElementById("btn");
        var newImg = document.getElementsByTagName("img")[0];
        // var isShow = true; //方法2

        // 2.绑定事件
        obtn.onclick = function (){
            // if (isShow) { //方法2
            if (obtn.innerHTML === '隐藏') {
                // 3.事件驱动程序
                newImg.style.display = 'none';
                obtn.innerHTML = "显示";  //
                // isShow = false; //方法2
            }else {
                newImg.style.display = 'block';
                obtn.innerHTML = "隐藏";
                // isShow = true; //方法2
            }
        }

    </script>
</body>
</html>

有两种实现方法,实现情况如下:

JavaScript实现显示和隐藏图片

这是默认显示界面,点击隐藏后,会这样:

JavaScript实现显示和隐藏图片

简单的显示和隐藏图片功能就实现啦!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 判断 object 的特定类转载
Feb 01 Javascript
js中格式化日期时间型数据函数代码
Nov 08 Javascript
jQuery Ajax使用 全解析
Dec 15 Javascript
javaScript语法总结
Nov 25 Javascript
浅谈JavaScript中promise的使用
Jan 11 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
Jan 17 Javascript
jQuery源码分析之sizzle选择器详解
Feb 13 Javascript
JS简单判断滚动条的滚动方向实现方法
Apr 28 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
Nov 09 Javascript
vue 父组件中调用子组件函数的方法
Jun 06 Javascript
layui实现数据表格隐藏列的示例
Oct 25 Javascript
加速vue组件渲染之性能优化
Apr 09 Javascript
JS Canvas接口和动画效果大全
Apr 29 #Javascript
JS ES6异步解决方案
Apr 29 #Javascript
聊聊JS ES6中的解构
Apr 29 #Javascript
详解TypeScript中的类型保护
Apr 29 #Javascript
7个你应该知道的JS原生错误类型
Apr 29 #Javascript
使用vue-element-admin框架从后端动态获取菜单功能的实现
如何使用JavaScript策略模式校验表单
Apr 29 #Javascript
You might like
php socket实现的聊天室代码分享
2014/08/16 PHP
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
2012/02/27 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
2015/12/03 Javascript
JS获取当前脚本文件的绝对路径
2016/03/02 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
微信小程序 详解页面跳转与返回并回传数据
2017/02/13 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
vue分页插件的使用方法
2019/12/25 Javascript
JS中FormData类实现文件上传
2020/03/27 Javascript
基于python 字符编码的理解
2017/09/02 Python
python实现图书馆研习室自动预约功能
2018/04/27 Python
python实现飞机大战游戏
2020/10/26 Python
在tensorflow中实现去除不足一个batch的数据
2020/01/20 Python
Boda Skins皮衣官网:奢侈皮夹克,全球配送
2016/12/15 全球购物
应届生服装设计自我评价
2013/09/20 职场文书
成绩单公证书
2014/04/10 职场文书
护理专业自荐书
2014/06/04 职场文书
运动会演讲稿300字
2014/08/25 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
五年级上册复习计划
2015/01/19 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
学术会议开幕词
2016/03/03 职场文书
竞聘书的秘诀
2019/04/02 职场文书
党员学习型组织心得体会
2019/06/21 职场文书
redis三种高可用方式部署的实现
2021/05/11 Redis
利用Pycharm连接服务器的全过程记录
2021/07/01 Python