一、案例需求

点击按钮后图片隐藏，同时按钮的文字变为显示，再次点击按钮图会显示，同时按钮的文

字变为隐藏。

二、案例分析

1、事件源：按钮（button）

2、事件类型：点击（onclick）

3、事件处理程序：

（1）文字内容改变用：innerText

（2）图片是否显示用：display

三、代码如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>显示和隐藏图片</title><style>#new {width: 200px;margin-top: 10px;}</style>
</head><body><button id="btn">隐藏</button><br><img src="data:images/img01.jpg" id="new"><script>// 1. 获取元素var btn = document.querySelector('#btn');var img = document.querySelector('#new');var index = 1;// 2. 添加事件btn.onclick = function() {//法一：if (index++ % 2 === 1) {img.style.display = 'none';this.innerText = '显示'} else {img.style.display = 'block';this.innerText = '隐藏';}// 法二// if (this.innerText === '隐藏') {//     img.style.display = 'none';//     this.innerText = '显示'// } else {//     img.style.display = 'block';//     this.innerText = '隐藏';// }};</script>
</body></html>

JS图片显示与隐藏案例相关推荐

html显示隐藏图片,简单的图片显示与隐藏
今天有个小问题,在iPhone上显示所有图片.但是不可能一次显示全部,只能显示图片的名称列表.需要点击图片名,然后显示图片,再次点击的话,就隐藏图片.一个比较简单的javascript代码,在这里记录 ...
js图片上传(隐藏input file)
使用js实现预览上传的图片原文:js实现预览上传的图片 <!DOCTYPE html> <html lang="en"><head><t ...
html中图片显示、隐藏
$("#photo_img").show(); $("#photo_img").hide(); 注:https://blog.csdn.net/a_sid/ar ...
设置input隐藏并用js控制显示和隐藏
style="visibility:hidden": 使对象在网页上隐藏,但该对象在网页上所占的空间没有改变. style="display:none": 使对 ...
vue的图片显示和隐藏
效果
html图片自动收起代码,HTML代码实现点击图片显示/隐藏
今天晚上刚好放了国庆假期,也发现好久没有摆弄博客了,就摆弄在文章页面添加了个打赏提示,确实,泽以最近的日子真心不好过了,做工作室倒闭,免费主机供应不起暂停,自助下单平台(dsw)备案掉了也暂停了,流量 ...
easyui中datagrid表格如何正确显示和隐藏
最近遇到了一个问题,是关于easyui数据表格的显示和隐藏的,一般显示元素可以通过dispaly:block(或show())和display:none (hide())控制显示隐藏的但是这个eas ...
使用正则表达式实现注册表单验证（包括下拉列表二级联动、密码显示和隐藏）...
根据所学知识和查找网上资料所写,有错误或不足之处欢迎指正. 实现的效果如下图(网络图片)所示: 开始写代码注册html页面--先简单的利用table标签和input标签写出来(上面的图片用PS制作) ...
html显示隐藏内容点击显示数据表代码,js如何实现点击显示和隐藏表格
js如何实现点击显示和隐藏表格一.总结一句话总结: 1.给table或者table里面的元素添加点击事件, 2.然后判断当前表格的数据显示或者隐藏, 3.然后通过display属性显示(非none ...

JS图片显示与隐藏案例

一、案例需求

二、案例分析

三、代码如下

JS图片显示与隐藏案例相关推荐

最新文章

热门文章