<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>  
</head>
<body>
    <button id="btn">隐藏</button>
    <br>
    <img src="img/1.jpeg" id="new">
    <script>
        var obtn=document.getElementById('btn');
        var img=document.getElementsByTagName('img')[0];
        //获取出img集合中的索引为0的照片
        obtn.onclick=function(){
            if(obtn.innerHTML=='隐藏')
            {
            img.style.display='none';
            obtn.innerHTML="显示";
            如果相等则改变obtn的文字为显示
            }
            else
            {
                img.style.display='block';
                obtn.innerHTML="隐藏";
            如果不相等则改变obtn的文字为隐藏
            }
        }
    </script>
</body>
</html>

JS隐藏显示图片的更多相关文章

  1. JS原生隐藏显示图片,点击切换图片的效果

    今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求, 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片 ...

  2. js随机显示图片

    定义一个图片数组,生成一个随机数对应数据索引. window.onload = choosePic; function choosePic() { var myPix = new Array(&quo ...

  3. Js控制显示、隐藏文本框中的密码

    Js控制显示.隐藏文本框中的密码,也可称为是一款小型的JavaScript星号密码破解器,点击会显示出密码类型的文本框中的真实信息,再次点击则还原,程序 主要是获取HTML元素对象,然后强制更改元素属 ...

  4. js简单显示和隐藏div，触发超链接，动态更改button值，setInterval（）简单使用，jquery easyui弹出框简单使用 .

    js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...

  5. JS控制DIV隐藏显示

    转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...

  6. 微信分享功能引入页面-控制分享时候调用的标题、图片、url和微信按钮隐藏显示控制

    1.设置分享调用的标题.图片.url预览. 2.控制右上角三个点按钮的隐藏显示(和底部工具栏的显示隐藏--未测试). 3.判断网页是否在微信中被调用. <!doctype html> &l ...

  7. JS 实现显示和隐藏div（以百度地图为例）

    主要参考的文章:https://my.oschina.net/xsh1208/blog/215811,https://zhidao.baidu.com/question/568774688.html ...

  8. 【功能代码】---5 JS通过事件隐藏显示元素

    JS通过事件隐藏显示元素 在开发中,很多时候我们需要点击事件,才显示隐藏元素.那如何做到页面刚开始就把标签隐藏. 有两种方法: (1) display:none    <div id=" ...

  9. 【js】【图片显示】js控制html页面显示图片方式

    js控制html页面显示图片方式,只需要引入“jquery-1.11.2.min.js” js: /* 引用 <script src="jquery-1.11.2.min.js&quo ...

随机推荐

  1. 完美实现STM32单总线挂多个DS18B20

    一般常见的STM32的关于DS18B20的例程都是检测一个传感器,代码一般都是跳过ROM检测,直接获取温度值.这种写法并不适用于单总线上挂载多个DS18B20的情况,Sandeepin的这个代码就是针 ...

  2. 关于MySQL5.6配置文件my-default.ini不生效问题

    一.问题描述 首先,由于工作要求,需使用MySQL5.6版本(绿色版),从解压到修改root密码,一切都很顺利,但是在我要修改mysql的最大连接数的时候,出现问题了,配置不生效.完蛋.还好有万能的百 ...

  3. Spring Boot定义系统启动任务的两种方式

    Spring Boot定义系统启动任务的两种方式 概述 如果涉及到系统任务,例如在项目启动阶段要做一些数据初始化操作,这些操作有一个共同的特点,只在项目启动时进行,以后都不再执行,这里,容易想到web ...

  4. 解题笔记——NIT 遥远的村庄

    某个小镇有 N 个村庄,村庄编号1-N,给出 M 条单向道路,不存在环,即不存在 村庄A可以到达村庄B 且 村庄B也可以到达村庄A的情况.如果村庄A与村庄B之间存在一条单向道路,则说村庄A和村庄B之间 ...

  5. potel99se 文件损坏修复

    一直使用protel99se来做电路图,非常方便快捷.最近一次打开常用的一个ddb文件,提示失败,无法打开了.protel99使用的数据库文件实际上是access97 的mdb数据库,于是修改成mdb ...

  6. Docker深入浅出系列 | 单节点多容器网络通信

    目录 教程目标 准备工作 带着问题开车 同一主机两个容器如何相互通信? 怎么从服务器外访问容器 Docker的三种网络模式是什么 Docker网络通信原理 计算机网络模型回顾 Linux中的网卡 查看 ...

  7. Kafka动态配置实现原理解析

    问题导读 Apache Kafka在全球各个领域各大公司获得广泛使用,得益于它强大的功能和不断完善的生态.其中Kafka动态配置是一个比较高频好用的功能,下面我们就来一探究竟. 动态配置是如何设计的? ...

  8. 小程序redio 样式

    小程序 radio 不写样式大概是这样的 数据为测试数据. 为了增加用户体验我们一下 美化后大概是这样的 给他设定头部.左边间距 ,和自身最小宽度 上代码: wxml: <radio-group ...

  9. angular之模块开发一

    模块化开发 概述 什么是模块化开发 将软件产品看作为一系列功能模块的组合 通过特定的方式实现软件所需模块的划分.管理.加载 为什么使用模块化开发 https://github.com/seajs/se ...

  10. NetModular 新年第一更以及升级指南(打造简单易用的.Net Core模块化快速开发框架~)

    先给大家拜个晚年,祝大家身体健康,远离肺炎~ NetModular开源已有一年,在这一年收到了很多建议,框架也变得越来越完善.这次更新包括了从去年年尾到现在所做的更改,感觉更改的内容还是蛮多的,所以记 ...