显示和隐藏

元素的显示和隐藏

元素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. 一、docker部署Jenkins

    1.部署启动脚本: [root@node10 docker-data]# cat start.sh docker run -d \ --restart=unless-stopped \ -v /opt ...

  2. Spring系列之JDBC对不同数据库异常如何抽象的？

    前言 使用Spring-Jdbc的情况下,在有些场景中,我们需要根据数据库报的异常类型的不同,来编写我们的业务代码.比如说,我们有这样一段逻辑,如果我们新插入的记录,存在唯一约束冲突,就会返回给客户端 ...

  3. Django——实现评论功能（包括评论回复）

    提示:(1)功能不全面,仅仅实现评论(2)样式简单 1.项目目录结构 2.模型 from django.db import models from django.contrib.auth.models ...

  4. Linux 动态库的编译和使用

    1. 动态链接库简介 动态库又叫动态链接库,是程序运行的时候加载的库,当动态链接库正确安装后,所有的程序都可以使用动态库来运行程序.动态库是目标文件的集合,目标文件在动态库中的组织方式是按特殊的方式组 ...

  5. Spring5（六）——AspectJ（xml）

    一.AspectJ 1.介绍 AspectJ是一个面向切面的框架,它扩展了Java语言.AspectJ定义了AOP语法,也可以说 AspectJ 是一个基于 Java 语言的 AOP 框架.通常我们在 ...

  6. MAC地址知识

    1. 全球唯一无法保障. 软件工具可以修改网卡的MAC地址 2.不需要全球唯一. 只要保障局域网内不重复就行.    路由器 保证 数据在不同局域网内跳转.   如果局域网内使用集线器,那么可以设置相 ...

  7. Ansible快速实战指南----多机自动化执行命令、部署神器

                                      1.需求: 需要在多台主机上,发送文件.执行命令,进行快速部署 2.ansible 远程复制文件 例子:在当前节点(20.88.14 ...

  8. JS预编译过程

    GO和AO 变量的预编译 实例1 console.log(a); var a=1; console.log(a); 实际编译过程: 将a存入预编译对象中,赋值为undefined: 真正的赋值语句当程 ...

  9. python安装easyinstall/pip出错

    在Windows中装了python3.6,自然还要装pip.按度娘的提供的方法先下载easyinstall,然后在CMD下输入: python ez_setup.py 结果报错 ........... ...

  10. Apache AB（1） - 快速使用

    前言 Apache AB的优缺点 十分快捷.简单 只适用HTTP协议 该工具更加适用于单接口性能压测 参数化实现麻烦:被测接口没有太多参数化 不支持场景化,不能将上下文串联起来 适用于快速开发小的场景 ...