显示和隐藏

元素的显示和隐藏

元素display属性可控制元素的显示和隐藏,先获取元素对象,再通过点语法调用style对象中的display属性

语法格式:

元素.style.display='none'

属性值说明:

　如果display值为"none"表示隐藏

　如果display值为"block"表示显示

<!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>

    <style>

        div {

            width: 200px;

            height: 200px;

            background-color: red;

            display: block;

        }

    </style>

</head>

<body>

    <div id="red" style="display: block;"></div>

    <script>

        var red = document.getElementById('red');

        // 对象.style 查看当前元素的css样式声明

        // css样式声明也是一个对象 可以再通过对象.属性的方式查看具体的样式

        console.log(red.style.display);

        red.style.display = 'none';//隐藏元素

        red.style.display = 'block';//显示元素

    </script>

</body>

</html>

案例:点击关闭按钮 隐藏图片

使用显示和隐藏属性关闭图片

　　图片的对齐方式

　　绑定关闭按钮事件,隐藏图片

<!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>

    <style>

        #red {

            width: 200px;

            height: 200px;

            background-color: red;

            display: block;

        }

        #img{

            width:122px;

            text-align: right;

            position: fixed;

            right: 0;

            top:200px;

        }

    </style>

</head>

<body>

    <div id="red" style="display: block;"></div>

    <div id = "img">

        <img id="target" src='img02-5.png' alt="">

        <img id="colse" src='img01-5.png' alt="">

    </div>

    <script>

        // 点击关闭按钮 关闭图片

        // 找到页面元素 关闭的小图片和被关闭的大图片 保存到变量中

        var target = document.getElementById('target')

        var close = document.getElementById('close')

        // 为小图片添加一个鼠标点击的事件

        // 当小图片被点击后 将两个图片全部隐藏

        close.onclic = function(){

            target.style.display = "none";

            close.style.display = 'none';

        }

        // 点击隐藏div img

    </script>

    <script>

        var red = document.getElementById('red');

        // 对象.style 查看当前元素的css样式声明

        // css样式声明也是一个对象 可以再通过对象.属性的方式查看具体的样式

        console.log(red.style.display);

        red.style.display = 'none';//隐藏元素

        red.style.display = 'block';//显示元素

    </script>

</body>

</html>
<!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>

    <style>

        html,body{

            height: 100%;

            margin: 0%;

        }

        #bg {

            width: 100%;

            height: 100%;

            background-color: rgba(0, 0, 0, 0.3);

            display: none;

        }

        #box{

            width:300px;

            height: 400px;

            background-color: #fff;

            border-radius: 5px;

            position: fixed;

            top:50%;

            left: 50%;

            margin-top: -200px;

            margin-left: -150px;

            display: none;

        }

    </style>

</head>

<body>

    <!-- 半透明的背景(遮罩层)-->

    <div id="bg"></div>

    <!-- 弹框(模态框)-->

    <div id="box">

        <span id="close">X</span>

    </div>

    <button id="open">显示弹窗</button>

    <script>

        // 获取页面中需要的元素

        var open = document.getElementById('open')

        var bg = document.getElementById('bg')

        var box = document.getElementById('box')

        var close = document.getElementById('close')

        // 为open绑定点击事件

        // 找到背景和弹框 将他们的属性display改为block

        open.onclick=function(){

            bg.style.display = 'block';

            box.style.display = 'block';

        }

        // 为close绑定点击事件

        // 找到背景和弹框 将他们的属性display改为none

        close.onclick = function(){

            bg.style.display = 'none';

            box.style.display = 'none';

        }

    </script>

</body>

</html>

JavaScript05的更多相关文章

随机推荐

  1. Redis的读写分离

    1.概述 随着企业业务的不断扩大,请求的并发量不断增长,Redis可能终会出现无法负载的情况,此时我们就需要想办法去提升Redis的负载能力. 读写分离(主从复制)是一个比较简单的扩展方案,使用多台机 ...

  2. VMware安装IPFire防火墙镜像

    之后便可以通过WEB登录到管理页面(admin账号,密码是在上面配置的) 详细可参考:https://www.mobibrw.com/2016/4900

  3. VUE带Token访问Abp Vnext Api

    上篇登录保存token用了3种方式,都可以在header带上Token访问,本次使用第四种保存方式Vuex中保存状态 stroe中配置好需要保存的字段及方法 import Vue from 'vue' ...

  4. MSSQL2008 无法分配空间,因为PRIMARY文件组已满

    1.收缩数据库日志 https://jingyan.baidu.com/article/1709ad808a279f4635c4f060.html 完整代码: --查看数据库的存放位置-- selec ...

  5. C# 获得当前方法 和 方法调用链 的 方法

    一个获得方法名的方法,depth表示调用此方法的回溯深度. 比如,A方法调用B方法,B方法调用GetCurrentMethodFullName(2),那么得到的结果是A方法的全名(namespace+ ...

  6. docker run配置参数

    Usage: docker run [OPTIONS] IMAGE [COMMAND] [ARG...] -d, --detach=false 指定容器运行于前台还是后台,默认为false -i, - ...

  7. eclipse中的一些快捷键

    1.内容提示 Alt+/ 2.快速修复 ctrl+/ 3.导包 ctrl+shift+o 4.格式代码块 ctrl+shift+o 5.向前向后 Alt+方向键 6.添加注释 ctrl+shift+/ ...

  8. 织梦Call to a member function GetInnerText() on string

    "include"-"customfields.func.php"文件,在第539行中把以下代码: $fvalue = trim($ntag->GetIn ...

  9. Linux下Nodejs安装（完整详细）转

    Linux下安装有两种方式,一个是下载源码make编译安装. 另外一种是比较推荐的,直接下载编译好的二进制,官方比较推荐后者. //Linux 64bit version wget --no-chec ...

  10. Docker系列（11）- 部署Nginx

    step-1 搜索镜像 使用search命令,建议去dockerhub上搜索,可以看到帮助文档 [root@localhost ~]# docker search nginx NAME DESCRIP ...