<!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. Python3之MySQL操作

    1.安装pymysql PyMySQL 是在 Python3.x 版本中用于连接 MySQL 服务器的一个库,在使用之前需要进行安装,可以使用以下命令安装最新版的 PyMySQL: 1).在cmd命令 ...

  2. golang中基本类型存储大小和转换

    Go语言的基本类型有: bool string int.int8.int16.int32.int64 uint.uint8.uint16.uint32.uint64.uintptr byte // u ...

  3. python下的selenium和chrome driver的安装

    selenium是一款支持多种语言.多种浏览器.多个平台的开源web自动化测试软件,测试人员可用python.java等语言编写自动化脚本,使得浏览器可以完全按照你的指令运行,大大节省了测试人员用鼠标 ...

  4. Docker基础内容之容器

    前言 容器是独立运行的一个或一组应用以及它们的运行态环境. 相关命令 启动容器相关命令 docker run 运行一个ubuntu14.04版本的容器,如果这个镜像本地不存在则会去默认仓库中下载 do ...

  5. linux 内存使用分析

      查看当前内存使用情况,最常用的指令就是 [root@t ~]# free -m total used free shared buffers cached Mem: -/+ buffers/cac ...

  6. 四 Shell条件测试

    条件测试操作 在bash的各种流程控制结构中通常要进行各种测试,然后根据测试结果执行不同的操作,有时也会通过与if等条件语句相结合,让我们可以方便的完成判断. 语法格式 test 选项 文件名或目录名 ...

  7. 【大白话系统】MySQL 学习总结 之 缓冲池(Buffer Pool) 的设计原理和管理机制

    一.缓冲池(Buffer Pool)的地位 在<MySQL 学习总结 之 InnoDB 存储引擎的架构设计>中,我们就讲到,缓冲池是 InnoDB 存储引擎中最重要的组件.因为为了提高 M ...

  8. Go语言实现：【剑指offer】第一个只出现一次的字符位置

    该题目来源于牛客网<剑指offer>专题. 在一个字符串(0<=字符串长度<=10000,全部由字母组成)中找到第一个只出现一次的字符,并返回它的位置, 如果没有则返回 -1( ...

  9. 新的征程TestOps

    TestOps 概念是什么时候提出来的没有去考察,知道TestOps测试运维是在DevOps这个概念下抽象的结果. DevOps,现在几乎每家公司都在谈DevOps,都已经实施,在实施,或者在准备实施 ...

  10. 重读es6， 正确了解promise中catch的用法

    前言 在最近的项目中,用到了es6的promise语法,发现promise.prototype.catch 并不只是单单reject抛出的回调函数,所以今天做一些笔录,防止以后在项目中又碰到这样的问题 ...