文章目录
  • 一、案例需求
  • 二、案例核心要点
  • 1、关闭对话框的效果实现
  • 2、display 属性简介
  • 3、页面标签结构和样式
  • 4、盒子模型细节
  • 5、绝对布局要点 - 设置负值即可超出父容器模型边框
  • 三、完整代码示例


JavaScript 中 可以通过 DOM ( 文档对象模型 ) 操作 来 修改网页的 内容 , 结构 , 样式 , 属性 ;



在 【Web APIs】JavaScript 操作元素 ① ( 修改元素内容 | innerText 属性修改元素文本内容 | innerHTML 属性修改元素 HTML 内容 ) 博客中介绍了 使用

  • innerText 属性
  • innerHTML 属性

修改 DOM 元素标签内容的 ;



在 【Web APIs】JavaScript 操作元素 ② ( 修改元素属性 | 直接访问属性 | 使用setAttribute、getAttribute 和 removeAttribute访问属性 ) 博客介绍 通过 DOM 操作 修改元素属性 ;

在 【Web APIs】JavaScript 操作元素 ③ ( 修改表单元素属性 | 表单常用属性 | 表单常用属性修改示例 ) 博客介绍 通过 DOM 操作 修改表单元素属性 ;

在 【Web APIs】JavaScript 操作元素 ④ ( 修改元素属性示例 | 密码表单标签结构 | 密码输入框样式设置 | 右侧图标按钮设置 | JavaScript 修改元素属性示例 ) 博客中 , 开发了一个 密码输入框案例 , 点击右侧按钮可 显示 / 隐藏 密码文本内容 , 实际上就是 切换 input 表单的类型 type 在 text / password 之间进行类型切换 ;

在 【Web APIs】JavaScript 操作元素 ⑤ ( 修改元素样式属性 | 行内样式操作 - element.style | 类名样式操作 | 类列表样式操作 ) 博客中 分析了 操作 元素样式属性的 三种方式 : 行内样式操作 , 类名样式操作 , 类列表样式操作 ;






一、案例需求


在页面中 , 设置一个对话框 , 点击对话框左侧 x 按钮 , 关闭对话框 ;

【Web APIs】JavaScript 操作元素 ⑥ ( 关闭对话框案例 | display 属性简介 | 页面标签结构和样式 | 盒子模型细节 | 绝对布局要点 - 设置负值即可超出父容器模型 )_javascript






二、案例核心要点



1、关闭对话框的效果实现



关闭对话框 的 效果 , 可以使用 display 属性实现 ;

  • 显示对话框 : 设置 display:block 属性 ;
  • 隐藏对话框 : 设置 display:none 属性 ;


2、display 属性简介



标签元素 的 display 属性 可用于定义一个元素如何在页面上显示 , 该属性 控制了元素的盒模型特性 , 如 : 尺寸、布局方式和如何处理与其他元素的关系 ;

display 属性的不同值可以影响页面的 布局 和 元素的可见性 ;



display 属性值 设置参考 :

  • block : 将元素 设置 为 块级元素 ;
  • 块级元素会在 新行上开始 , 并占据整行的宽度 ;
  • 常见的块级元素有 <div>、<p>、<h1> ;
  • inline : 将元素 设置 为 行内元素 ;
  • 行内元素 不会 开始新行 , 只会在本行占据它所需要的空间 ;
  • 常见的行内元素有<span>、<a>、<strong> ;
  • inline-block : 将元素设置为 行内块元素 ;
  • 行内块元素 结合了 block 块级元素 和 inline 行内元素 的 特性 ;
  • 行内块元素 在行内显示 , 但可以设置宽度和高度 , 且元素不会换行 ;
  • none : 隐藏元素 , 元素不会显示在页面上 , 且不占据任何空间 ;
  • 该设置 用于隐藏元素 , 并且不会影响页面布局 ;
  • flex : 设置元素 为 弹性容器 , 子元素 按指定的方式排列和对齐 ;
  • 适用于现代布局设计 , 支持更复杂的响应式布局 ;
  • 一般在手机页面中使用 , PC 页面不常用 ;
  • grid : 设置元素 为 网格容器
  • list-item : 设置元素 为 列表项 , 通常用于 <li> 元素 , 该类型元素前面添加一个项目符号或数字 ;
  • table : 设置元素 为 表格 , 类似于 HTML 的 <table> 标签元素 , 该设置影响元素的布局方式 , 元素显示为表格格式 ;


3、页面标签结构和样式



代码的标签结构为 :

<div class="box">
        <div class="inner_box">盒子模型元素</div>
        <i class="close-btn">×</i>
    </div>
  • 1.
  • 2.
  • 3.
  • 4.

外部的 div 标签 box 元素 设置为 100 x 100 像素 , 其样式如下 , 注意 要设置 相对布局 , 因为其子元素要使用绝对布局 ;

.box {
            /* 相对布局 子元素 绝对布局 子绝父相 */
            position: relative;
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: #f40;
            background-color: aqua;
            /* display: block; 显示元素*/
            /* display: none;  隐藏元素*/
        }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.

内部的 div 标签元素 只是 用于显示一行字 , 没有其它作用 , 设置 50 x 50 像素 居中显示文本即可 ;

.box .inner_box {
            width: 50px;
            height: 50px;
            margin: 10px auto;
        }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

关闭按钮 , 需要考虑 将 按钮 设置到 父容器 之外 , 这里使用绝对布局 ;

.close-btn {
            /* 绝对布局 父元素 相对布局 子绝父相 */
            position: absolute;
            /* 外部的 box 有 1 像素边框 按钮也有 1 像素边框 为了使按钮与盒子对齐 */
            top: -1px;
            /* 将按钮放在 盒子的 左侧 多出的 2 像素是边框 */
            left: -22px;
            /* 设置 左侧 关闭按钮宽高 */
            width: 20px;
            height: 20px;
            border: 1px solid #ccc;
            line-height: 20px;
            /* 设置字体 */
            font-family: Arial, Helvetica, sans-serif;
            /* 设置鼠标移动上之后变成小手 */
            cursor: pointer;
        }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.



4、盒子模型细节



HTML 的 一个布局 可以看做一个 矩形的 盒子模型 , 该 盒子模型 是一个用于 容纳 标签元素 的容器 ; 盒子模型 组成 : 由内到外顺序如下 :

  • 内容 Content : 下图中 内容为 100 x 100 像素的元素 ;
  • 内边距 Padding : 内边距 Padding 位于 边框 与 内容 之间 ;
  • 边框 Border : 边框 包裹 内边距 , 在 外边距 与 内边距 之间 , 边框 1 像素 ;
  • 外边距 Margin : 最外层 元素 , 与其它盒子的距离 ;

【Web APIs】JavaScript 操作元素 ⑥ ( 关闭对话框案例 | display 属性简介 | 页面标签结构和样式 | 盒子模型细节 | 绝对布局要点 - 设置负值即可超出父容器模型 )_开发语言_02

<div class="box"> 标签设置了 1 像素的 边框 ,

<i class="close-btn">×</i> 标签 也设置了 1 像素的 边框 ,

设置 按钮时 , 左侧和 顶部 的 样式 , 绝对布局 距离顶部 设置 -1 像素 , 距离左侧 -22 像素 , 正好可以将 按钮 与 外部盒子模型 进行对齐操作 ;

/* 外部的 box 有 1 像素边框 按钮也有 1 像素边框 为了使按钮与盒子对齐 */
            top: -1px;
            /* 将按钮放在 盒子的 左侧 多出的 2 像素是边框 */
            left: -22px;
  • 1.
  • 2.
  • 3.
  • 4.



5、绝对布局要点 - 设置负值即可超出父容器模型边框



如果 想要 将子元素 设置到 父容器 之外 ,

父容器 使用 相对布局 , 子元素 使用 绝对布局 , 设置 上下左右 绝对布局值的时候 , 使用 负值即可超出边界 ;

【Web APIs】JavaScript 操作元素 ⑥ ( 关闭对话框案例 | display 属性简介 | 页面标签结构和样式 | 盒子模型细节 | 绝对布局要点 - 设置负值即可超出父容器模型 )_javascript_03






三、完整代码示例


代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline Style Operation Example</title>
    <style>
        .box {
            /* 相对布局 子元素 绝对布局 子绝父相 */
            position: relative;
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: #f40;
            background-color: aqua;
            /* display: block; 显示元素*/
            /* display: none;  隐藏元素*/
        }
        
        .box .inner_box {
            width: 50px;
            height: 50px;
            margin: 10px auto;
        }
        
        .close-btn {
            /* 绝对布局 父元素 相对布局 子绝父相 */
            position: absolute;
            /* 外部的 box 有 1 像素边框 按钮也有 1 像素边框 为了使按钮与盒子对齐 */
            top: -1px;
            /* 将按钮放在 盒子的 左侧 多出的 2 像素是边框 */
            left: -22px;
            /* 设置 左侧 关闭按钮宽高 */
            width: 20px;
            height: 20px;
            border: 1px solid #ccc;
            line-height: 20px;
            /* 设置字体 */
            font-family: Arial, Helvetica, sans-serif;
            /* 设置鼠标移动上之后变成小手 */
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="inner_box">盒子模型元素</div>
        <i class="close-btn">×</i>
    </div>

    <script>
        // 1. 获取元素 
        var btn = document.querySelector('.close-btn');
        var box = document.querySelector('.box');
        // 2.注册事件 程序处理
        btn.onclick = function() {
            box.style.display = 'none';
        }
    </script>
</body>

</html>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.

执行效果 :

【Web APIs】JavaScript 操作元素 ⑥ ( 关闭对话框案例 | display 属性简介 | 页面标签结构和样式 | 盒子模型细节 | 绝对布局要点 - 设置负值即可超出父容器模型 )_绝对布局_04