<!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. Java容器解析系列(16) android内存优化之SparseArray

    HashMap的缺点: 自动装箱导致的性能损失; 使用拉链法来解决hash冲突,如果hash冲突较多,需要遍历链表,导致性能下降,在Java 8 中,如果链表长度>8,会使用红黑树来代替链表; ...

  2. Java容器解析系列(13) WeakHashMap详解

    关于WeakHashMap其实没有太多可说的,其与HashMap大致相同,区别就在于: 对每个key的引用方式为弱引用; 关于java4种引用方式,参考java Reference 网上很多说 弱引用 ...

  3. php7 mongodb 扩展windows 安装

    1. 打开phpinfo 查看 nts(非线程) 还是 ts (线程),然后查看操作位数 注: 86 等于 32 位  2. 下载对应的版本的php_mongodb.dll 文件 下载链接: pecl ...

  4. linux之nfs

    之前一篇博客记录了Windows系统与Linux系统文件共享的最佳选择,此篇记录Linux系统与Linux系统之间文件共享的最佳选择----NFS 一.NFS 简介和架构图 NFS是Network F ...

  5. 秒秒钟破解eval加密

    前言  准确的说eval处理过的代码应该叫做压缩代码,不过效果上算是加密过了一样!很多小伙伴不想直接让别人看到自己的js代码往往就会采取这样的处理措施.不过,其实这样的方法只能防御那些小白.对于真正的 ...

  6. SDL初始化和创建窗口

    //初始化SDL2和创建一个窗口,并且将屏幕绘制成大红色 #include <iostream> extern "C" { #include <SDL.h> ...

  7. GetWindowRect与GetClientRect 的区别

    GetWindowRect 函数功能:该函数返回指定窗口的边框矩形的尺寸.该尺寸以相对于屏幕坐标左上角的屏幕坐标给出. 函数原型:BOOL GetWindowRect(HWND hWnd,LPRECT ...

  8. python3调用哈工大ltp

    运行环境ubuntu+python3 安装pyltp sudo pip3 install pyltp 下载ltp_data_v3.4.0模型 http://ltp.ai/ 分句 from pyltp ...

  9. python 函数3（模块）

    1.将函数存储在模块中 1.1.导入整个模块 要将函数导入,得先创建模块,模块 是扩展名为.py的文件,包含要导入到程序中的代码. 首先定义编写一个.py的文件,命名为pizza.py,代码如下: d ...

  10. https原理总结

    博客搬家: https原理总结 最近在公司项目的服务器上做一些内部接口,要求使用https,于是花时间研究了一波.我们熟知的http在传输时未对数据进行加密,在传输一些敏感信息时存在着不小的安全隐患. ...