显示和隐藏

元素的显示和隐藏

元素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学习随笔---基础管理部分---

    docker是什么?提供快速.高效.轻量的微服务平台 1. 背景介绍突破虚拟机对资源占用高.启动时间长.镜像存储大.集群规模小等限制,摆脱操作系统级的隔离级别,实现进程级管理.主要专用名词: chro ...

  2. MySQL——MySQL客户端命令

    1. mysql: (1)用于数据库连接 (2)用于管理数据库: a: 命令接口自带命令 b: SQL语句: DDL: 数据库定义语言 DCL: 数据库控制语言 DML: 数据库操作语言 2. mys ...

  3. JPA实现泛型baseServcie+Mybatis

    在开发的过程中,我们总无法避免不同的实体类会去实现相同的操作(增删查改,分页查询等),因此在开发时,我们期望泛型将通用的方法进行包装,使我们能够专注于实体类自身的独特方法,而非一般性常用且重复性高的方 ...

  4. 三剑客之sed编辑器 基操

    目录: 一.sed编辑器 二.打印内容 三.使用地址 四.删除行 五.替换 六.插入 一.sed编辑器 sed是一种流编辑器,流编辑器会在编辑器处理数据之前基于预先提供的一组规则来编辑数据流. sed ...

  5. CommonsCollections3 反序列化利用链分析

    InstantiateTransformer commons-collections 3.1 中有 InstantiateTransformer 这么一个类,这个类也实现了 Transformer的t ...

  6. Mybatis简单查询

    目录 前言 一.时间区间查询 1.xml中实现 2. Mybatis Plus 方式 二.模糊查询 1.xml中实现 2. Mybatis Plus 方式 前言  好记性不如烂笔头,记录内容,方便日后 ...

  7. leetcode-H2O生成(多线程）

    现在有两种线程,氧 oxygen 和氢 hydrogen,你的目标是组织这两种线程来产生水分子. 存在一个屏障(barrier)使得每个线程必须等候直到一个完整水分子能够被产生出来. 氢和氧线程会被分 ...

  8. CS:APP Chapter 3 程序的机器级表示-读书笔记

    3.1 程序的机器级表示 发展历史 Intel,AMD,ARM 等企业各有又是,CPU 从 8 位发展到 16 位,再到 32 位,近几年发展到 64 位,当下的 CPU 体系被称为 x86-64 体 ...

  9. 修改文件权限后,再git pull后提示文件已修改

    问题: 从git上面pull下来脚本文件,在Linux上面执行.执行chmod +x 后,如果再次有修改文件,git pull 的提示会终止.每次都要使用 git checkout -- <fi ...

  10. centos linux服务器apache+mysql环境访问慢优化方法

    查找软件安装目录:find / -name 软件名称 一.优化apache配置增加MaxClients的值 默认情况下,2.0及以上apache版本MaxClients的值为256,对于中大型应用访问 ...