显示和隐藏

元素的显示和隐藏

元素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. multipass指定virualbox搭建k8s集群（选择docker作为默认容器）

    目录 前言 步骤 初始化三台虚拟机 统一安装docker 修改docker镜像源 查看masterIP 安装master节点(重点设置) 查看master的token 安装worker节点 测试 部署 ...

  2. Java中使用DOM4J来生成xml文件和解析xml文件

    一.前言 现在有不少需求,是需要我们解析xml文件中的数据,然后导入到数据库中,当然解析xml文件也有好多种方法,小编觉得还是DOM4J用的最多最广泛也最好理解的吧.小编也是最近需求里遇到了,就来整理 ...

  3. freemodbus移植、实例及其测试方法

    Modbus简介 参考:Modbus​协议​深入​讲解 https://www.ni.com/zh-cn/innovations/white-papers/14/the-modbus-protocol ...

  4. 什么是内存屏障？ Why Memory Barriers ?

           要了解如何使用memory barrier,最好的方法是明白它为什么存在.CPU硬件设计为了提高指令的执行速度,增设了两个缓冲区(store buffer, invalidate que ...

  5. Spring基于XML方式加载Bean定义信息(又名：Spring IOC源码时序图)-图解

  6. shell--目录通配符

    符号 说明 ? 匹配任一字符 * 匹配一个或多个字符 [a-z0-9] 类似于正则表达式, 若想匹配?可用[?] [!a-z] 类似于正则表达式[^a-z], 不匹配中括号中的内容 {string1, ...

  7. 常见shell脚本测试题 if/case语句

    1.检查用户家目录中的 test.sh 文件是否存在,并且检查是否有执行权限2.提示用户输入100米赛跑的秒数,要求判断秒数大于0且小于等于10秒的进入选拔赛,大于10秒的都淘汰,如果输入其它字符则提 ...

  8. Go并发编程--正确使用goroutine

    目录 1. 对创建的gorouting负载 1.1 不要创建一个你不知道何时退出的 goroutine 1.1.1 不要帮别人做选择 1.1.2 不要作为一个旁观者 1.1.3 不要创建不知道什么时候 ...

  9. Java XXE漏洞典型场景分析

    本文首发于oppo安全应急响应中心: https://mp.weixin.qq.com/s?__biz=MzUyNzc4Mzk3MQ==&mid=2247485488&idx=1&am ...

  10. 【PHP数据结构】图的存储结构

    图的概念介绍得差不多了,大家可以消化消化再继续学习后面的内容.如果没有什么问题的话,我们就继续学习接下来的内容.当然,这还不是最麻烦的地方,因为今天我们只是介绍图的存储结构而已. 图的顺序存储结构:邻 ...