<!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. CSS-17-页面布局

    页面布局: 静态布局: 静态布局:元素不变的布局. 布局特点:缩小后内容被遮挡,拖动滚动条显示布局 设计方法: PC:居中布局,所有样式使用绝对宽度和高度 移动设备:另外建立移动网站,以m.域名为域名 ...

  2. spring动态修改bean

    spring动态修改bean @RequestMapping("ok") public Object test2(){ ApplicationContext application ...

  3. 编译调试 .NET Core 5.0 Preview 并分析 Span 的实现原理

    很久没有写过 .NET Core 相关的文章了,目前关店在家休息所以有些时间写一篇新的

  4. 【WPF学习】第三十一章 WPF命令模型

    WPF命令模型由许多可变的部分组成.总之,它们都具有如下4个重要元素: 命令:命令表示应用程序任务,并且跟踪任务是否能够被执行.然而,命令实际上不包含执行应用程序任务的代码. 命令绑定:每个命令绑定针 ...

  5. JVM性能优化系列-(3) 虚拟机执行子系统

    3. 虚拟机执行子系统 3.1 Java跨平台的基础 Java刚诞生的宣传口号:一次编写,到处运行(Write Once, Run Anywhere),其中字节码是构成平台无关的基石,也是语言无关性的 ...

  6. Ubuntu解决 MariaDB无密码就可以登录的问题

    使用apt-get来安装mysql,安装好之后发现安装的是 MariaDB,如下,无需密码既可以登录了.即使使用mysqladmin或mysql_secure_installation 设置好密码,用 ...

  7. 物流跟踪API-快递单订阅

    上一篇文章我们讲解了轨迹查询的接口,通过快递鸟接口可以实现实时查询物流轨迹,这次给大家推荐订阅服务功能. 为了更好的理解订阅服务,我们来做个对比, 即时查询是主动查询物流轨迹,需要我们主动调用接口才能 ...

  8. jsp：useBean 不能编译成class或者没有class这个属性

    bean.jsp <%-- JSP学习笔记 --%> <%@ page contentType="text/html;charset=UTF-8" languag ...

  9. HDU_4734_数位dp

    http://acm.hdu.edu.cn/showproblem.php?pid=4734 模版题. #include<iostream> #include<cstdio> ...

  10. Codeforces 1060C Maximum Subrectangle(子矩阵+预处理)

    题意:给出数组a,b,组成矩阵c,其中$c_{ij}=a_i*b_j$,找出最的大子矩阵,使得矩阵元素和<=x,求这个矩阵的size n,m<=2000 思路:对于子矩阵(l1...r1) ...