原生js实现点击按钮显示/隐藏图片

已于 2023-03-14 12:41:24 修改
阅读量6.2k 收藏 27
点赞数 7
文章标签： javascript 开发语言 dom
于 2022-02-26 19:13:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44109827/article/details/123154360
版权

目录结构：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示和隐藏图片</title>
</head>
<body>
    <button id="btn" style="margin-left: 230px;">隐藏</button>
</br>
    <img style="margin-top: 10px;" src="./images/img01.jpg" width="500px" height="300px"> 
    <script>
        // 1.获取事件源
        var btn = document.getElementById("btn");
        var img = document.getElementsByTagName("img")[0];
        // var isShow = true;
        // 2.绑定事件
        btn.onclick = function() {
            // 3. 事件驱动程序
            if(btn.innerHTML === "隐藏"){
                img.style.display = "none";
                btn.innerHTML = "显示";
                // isShow = false;
            } else {
                img.style.display = "block";
                btn.innerHTML = "隐藏";
                // isShow = true;
            }
        }
    </script>
</body>
</html>

 样式：

- 如果这篇文章对你有所帮助，请记得点个赞哦~

想做一只快乐的修狗
关注
  • 7
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
原生JS点击小图弹出大图特效代码
03-20
原生JS点击小图弹出大图代码是一款支持点击左右按钮切换大图，支持是否显示分页控件。
实现在html上点击一个按钮出现一张照片
lalalalalala_的博客
09-11 2万+
代码：(部分) function reP(){ document.getElementById('oImg').style.display = "block"; }
js选择图片并显示图片
wcy1900353090的博客
04-15 553
【代码】js选择图片并显示图片。
Java接受blob类型图片_原生JS上传图片接收服务器端图片并且显示图片（主要描述blob类型）...
weixin_39988164的博客
03-02 2999
1.了解后端处理图像的方式一：图片以独立文件的形式存储在服务器的指定文件夹中，再将路径存入数据库字段中二：将图片转换成blob，直接存储到数据库的 Image 类型字段中(这种方式负担很大不建议使用)blob (binary large object)二进制大对象2.第一种前端直接将存储路径赋值给src属性即可轻松显示前端发起get请求后，后端可直接返回图片在服务器中地址3.第二种以二进制流传输图...
js实现放大图片
pursue.dreams的博客
05-13 2305
点击某个图片展示的效果，点击灰色区域可关闭弹窗。
[QT]实现点击按钮弹出图片的效果
qq_39295354的博客
04-18 6176
点击按钮弹出图片的实现 void MainWindow::btnTest() { QLabel* labelImage = new QLabel(this, Qt::Dialog |Qt::WindowCloseButtonHint); /* 去掉?按钮 */ labelImage->setWindowTitle("图片"); QString imagePath = "B:\\Image\\JPG\\3.jpg"; QFileInfo file(im
JavaScript实战017：简单的图片弹功能
kevinfan的博客
02-20 2115
搞定了轮播，接着再做个图片弹窗的效果，最后再把图片弹窗和轮播结合起来，当我点击轮播中图片时能将图片弹出，达到放大的效果，为了不那么复杂，所以先分开来完成，今天先实现一张图片的弹窗效果，当鼠标点击图片的时候就将图片的原图弹出来，下面是效果图动画。 第一步：，还是先写出HTML基本代码，这里只用到了一张图片，弹出的图片还是原来的哪一张，这里我分别定义了两个div，small指缩小...
JavaScript的img.src属性设置图片无法显示问题
qq_51950796的博客
06-23 857
自己遇到的一个错误，记录下来以免再犯。
js图片点击隐藏
m0_74186955的博客
03-21 456
2.在<template></template>模板中绑定tempContent.vue组件，通过使用组件来简洁代码，通过v-for将imgs文件中的每一张图片遍历到i中储存，在通过props把i返回到im，并放进src加载出来。1.通过<script></script>引入的Vue.js文件。并通过给图片的div绑定v-on:click（@click）事件和。指令来实现图片点击后隐藏和显示的效果。通过采用弹性布局，排列图片。创建一个 Vue 实例。把图片放入imgs列表。
JS图片显示与隐藏案例
mengfanshaoxia的博客
02-15 3174
一、案例需求 点击按钮后图片隐藏，同时按钮的文字变为显示，再次点击按钮图会显示，同时按钮的文 字变为隐藏。 二、案例分析 1、事件源：按钮（button） 2、事件类型：点击（onclick） 3、事件处理程序： （1）文字内容改变用：innerText （2）图片是否显示用：display 三、代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"
原生JS实现隐藏显示图片 JS实现点击切换图片效果
12-12
2.当点击显示的时候,按钮文字变成隐藏,同时图片显示出来,同理,当点击隐藏的时候,按钮文字变成显示,图片隐藏起来 3.当点击换的时候,图片会变成另外一张,当再次点击的时候,图片又会变回来, 4.当图片隐藏的时候,图片不...
原生JS实现的自动轮播图功能详解
12-29
本文实例讲述了原生JS实现的自动轮播图功能。分享给大家供大家参考，具体如下： 轮播图的用处 轮播图是现在网站网页上最常见的效果之一，很多网站上都会用到，淘宝京东等等。有些自动选项卡也是需要用到的，而且它的...
原生js实现轮播图特效
11-21
鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。 ​ 2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。 ​ 3.图片播放的同时，下面小圆圈模块跟随一起变化。 ​ 4.点击小圆圈，可以播放...
原生JS实现图片轮播切换效果
01-21
1、父元素作为显示窗口，大小固定超出部分隐藏，即设置overflow:hidden; 2、子元素存放图片列表用ul，ul固定定位，参照为父元素，即父元素position:relative;ul元素position:absolute; 3、一个li即一张图片的宽度为...
原生JS仿QQ阅读点击展开、收起效果
12-01
使用JS技术实现QQ阅读类似的点击展开、收起效果，具体内容如下 一、定义展开函数showdiv(),实现点击”全文”按钮，全文展开。 1.点击展开函数，需要将触发点击事件的按钮作为参数传入 2.通过传入的按钮，查找其父...
js读取本地图片并显示
热门推荐
qiulei_21的专栏
10-11 4万+
js学习
利用JavaScript查看照片
最新发布
qq_33267306的博客
10-31 410
打开任意的文件夹，显示里面的照片文件
js显示本地图片
叼到飞上天的博客
07-27 793
jQuery(function() {         jQuery("#photo").change(function(event) {             // 根据这个 获取文件的 HTML5 js 对象             var files = event.target.files, file;             if (files && files.length
JS按钮单击事件及手动切换图片
qq_47043757的博客
08-08 2227
图片的切换以及xx.onclick=function(){} 与 addEventListener()绑定事件。1. 两个单击事件完成图片的切换。用于少数的图片，做一个切换。2.手动切换几张图片。
使用原生html +js 写判断显示隐藏和循环
07-15
可以使用原生的 HTML 和 JavaScript 来实现判断显示隐藏和循环的功能。以下是一个示例： ```html <!DOCTYPE html> <html> <head> <title>判断显示隐藏和循环示例</title> <script> function toggleVisibility() { var element = document.getElementById("myElement"); if (element.style.display === "none") { element.style.display = "block"; } else { element.style.display = "none"; } } function loopExample() { var output = ""; for (var i = 1; i <= 5; i++) { output += "循环第 " + i + " 次<br>"; } document.getElementById("loopOutput").innerHTML = output; } </script> </head> <body> <button onclick="toggleVisibility()">切换显示隐藏</button> <div id="myElement" style="display: none;"> 这是一个要隐藏和显示的元素 </div> <button onclick="loopExample()">循环示例</button> <div id="loopOutput"></div> </body> </html> ``` 在上面的示例中，我们定义了两个 JavaScript 函数 `toggleVisibility()` 和 `loopExample()`。`toggleVisibility()` 函数用于切换指定元素的显示和隐藏，通过获取元素的 `style.display` 属性来判断当前状态并进行切换。`loopExample()` 函数用于循环输出一定次数的文本，在每次循环中将文本内容添加到一个字符串变量中，最后将结果显示在指定的元素中。 在 HTML 部分，我们定义了两个按钮，分别用于触发 `toggleVisibility()` 和 `loopExample()` 函数。另外，我们定义了一个隐藏和显示的 `<div>` 元素，并初始设置为隐藏状态。还有一个用于展示循环结果的 `<div>` 元素。 当点击切换显示隐藏的按钮时，会调用 `toggleVisibility()` 函数来切换隐藏和显示状态。当点击循环示例的按钮时，会调用 `loopExample()` 函数来进行循环并将结果展示在页面中。 这样就实现了使用原生的 HTML 和 JavaScript 来实现判断显示隐藏和循环的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

想做一只快乐的修狗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值