显示和隐藏

元素的显示和隐藏

元素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. 前后端数据交互(二)——原生 ajax 请求详解

    一.ajax介绍 ajax 是前后端交互的重要手段或桥梁.它不是一个技术,是一组技术的组合. ajax :a:异步:j:js:a:和:x:服务端的数据. ajax的组成: 异步的 js 事件 其他 j ...

  2. K8S日常运维中关于“ImagePullBackOff”报错的处理思路分析

    故障案例: 发现故障:kubectl get pod -n kube-system -owide|grep -v "Running"NAME READY STATUS RESTAR ...

  3. 发那科FANUC机器人视频学习教程

    82课时的全套发那科机器人视频教程,学完可以掌握发那科机械手的使用和编程,需要的加我微信私私聊.X241602 FANUC 是日本一家专门研究数控系统的公司,成立于1956年.是世界上最大的专业数控系 ...

  4. Identity角色管理五（添加用户到角色组）

    因需要在用户列表中点详情按钮来到当前页,所以需要展示分组详情,并展示当前所属角色组的用户 public async Task<ActionResult> Details(string id ...

  5. 远程线程注入DLL突破session 0 隔离

    远程线程注入DLL突破session 0 隔离 0x00 前言 补充上篇的远程线程注入,突破系统SESSION 0 隔离,向系统服务进程中注入DLL. 0x01 介绍 通过CreateRemoteTh ...

  6. 在开发中使用GMap.Net 控件的心得一

    首先必须先加载GMap.Net这个控件,先通过"添加引用"来加载相应的.dll文件,如果在工具箱中找不到GMapControl这个控件,也别心急． 点击"工具" ...

  7. Maven专题3——生命周期与插件

    三套生命周期 Maven有3套相互独立的生命周期,用户可以调用某个生命周期的阶段,而不会对其他生命周期产生影响. 每个生命周期包含一些有先后顺序的阶段,后面的阶段依赖于前面的阶段,意味着用户调用后面的 ...

  8. 自制计算器 v1.1

    之前的v1.0版本功能还不够完善,这个版本一并做了修改. 代码,每个sub表示哪个按钮做了注释. Dim a, temp, ans As Integer Dim op As String Sub sh ...

  9. 学习PHP中Fileinfo扩展的使用

    今天来学习的这个扩展其实现在也已经是标配的一个扩展了,为什么呢?因为 Laravel 框架在安装的时候它就是必须的一个扩展,没有打开它的话,连 Laravel 框架都是无法使用的. Fileinfo ...

  10. 让tp6显示详细的错误信息及行号

    方法一:默认情况下Ttp6不会显示错误信息,在开发环境下想要查看错误信息需要将Config目录下的app.php文件的show_error_msg改成true 但是这样显示的信息也不够完整, 要看到更 ...