BOM对象——元素偏移量offset系列

目录

前言

1、元素偏移量offset系列

1.1、offset概述

1.2、offset和style的区别 

offset 

style 

2、案例时间

2.1、模态框的拖拽

 案例分析

案例展示 

代码实现 

总结

---

​​​
前言

小编我最近正在学习BOM对象，当我学到元素偏移量offset系列的时候我觉得有必要和大家一起分享一下，因为这个元素偏移量offset让我玩的非常开心。这是一个很好玩的属性，我希望你们通过我的博客也会喜欢上他。

---

1、元素偏移量offset系列

1.1、offset概述

        offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

• 获得元素距离带有定位父元素的位置

• 获得元素自身的大小（宽度高度）

• 注意：返回的数值都不带单位  

1.2、offset和style的区别 

offset 

• offset 可以得到任意样式表中的样式值

• offset 系列获得的数值是没有单位的

• offsetWidth 包含padding+border+width

• offsetWidth 等属性是只读属性，只能获取不能赋值

• 想要获取元素大小位置，用offset更合适  

style 

• style 只能得到行内样式表中的样式值

• style.width 获得的是带有单位的字符串

• style.width 获得不包含padding和border 的值

• style.width 是可读写属性，可以获取也可以赋值

• 想要给元素更改值，用style更合适 

2、案例时间

        看多了理论知识，我们现在来结合案例来一起看看元素偏移量offset能做出那些让我们惊叹的效果吧！ 

2.1、模态框的拖拽

弹出框，我们也称为模态框。

        1.点击弹出层，会弹出模态框， 并且显示灰色半透明的遮挡层。

        2.点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层。

        3.鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动。

        4.鼠标松开，可以停止拖动模态框移动

 案例分析

1. 点击弹出层， 模态框和遮挡层就会显示出来 display:block;

2. 点击关闭按钮，模态框和遮挡层就会隐藏起来 display:none;

3. 在页面中拖拽的原理：鼠标按下并且移动， 之后松开鼠标

4. 触发事件是鼠标按下mousedown，鼠标移动mousemove 鼠标松开 mouseup

5. 拖拽过程:  鼠标移动过程中，获得最新的值赋值给模态框的left和top值，这样模态框可以跟着鼠标走了

6. 鼠标按下触发的事件源是最上面一行，就是  id 为 title

7. 鼠标的坐标减去 鼠标在盒子内的坐标， 才是模态框真正的位置。

8. 鼠标按下，我们要得到鼠标在盒子的坐标。

9. 鼠标移动，就让模态框的坐标  设置为  ：鼠标坐标 减去盒子坐标即可，注意移动事件写到按下事件里面。

10. 鼠标松开，就停止拖拽，就是可以让鼠标移动事件解除 

案例展示 

模态框的拖动

代码实现 

CSS部分：

* {
            margin: 0;
            padding: 0;
        }
        
        a {
            text-decoration: none;
        }
        
        .login-header {
            width: 100%;
            text-align: center;
            font-size: 26px;
            padding: 20px 0;
        }
        
        .login-header a {
            color: black;
            font-weight: 700;
        }
        
        .login {
            display: none;
            position: relative;
            width: 512px;
            height: 280px;
            background-color: #fff;
            text-align: center;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999;
        }
        
        .login .login-title {
            width: 100%;
            height: 50px;
            line-height: 50px;
            font-size: 20px;
        }
        
        .login .login-title:hover {
            cursor: move;
        }
        
        .login .close-login {
            position: absolute;
            top: -15px;
            right: -15px;
            border-radius: 15px;
            line-height: 30px;
            text-align: center;
            width: 30px;
            height: 30px;
            font-size: 12px;
            color: black;
            background-color: #ccc;
        }
        
        .login .login-input {
            padding: 10px 0;
            font-size: 12px;
        }
        
        .login .login-input .username,
        .password {
            height: 30px;
            width: 250px;
            border: 1px solid #ccc;
        }
        
        input::placeholder {
            font-size: 12px;
            padding-left: 10px;
        }
        
        .login .login-button {
            margin-top: 20px;
        }
        
        .login .login-button a {
            color: black;
            font-size: 16px;
            padding: 10px 30px;
            border: 1px solid #ccc;
            background-color: #fff;
        }
        
        .login-bg {
            display: none;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, .3);
        }

HTML部分代码：

<div class="login-header">
        <a href="JavaScript:;" id="link">点击，弹出登录框</a>
    </div>
    <div id="login" class="login">
        <div id="title" class="login-title">
            登录会员
            <span><a id="closeBtn" href="JavaScript:;" class="close-login">关闭</a></span>
        </div>
        <div class="login-input-content">
            <div class="login-input">
                <label>&nbsp;&nbsp;&nbsp;用户名：</label>
                <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="username">
            </div>
            <div class="login-input">
                <label>登录密码：</label>
                <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="password">
            </div>
        </div>
        <div id="loginBtn" class="login-button">
            <a href="JavaScript:;" id="login-button-submit">登录会员</a>
        </div>
    </div>
    <div id="bg" class="login-bg"></div>

JavaScript部分代码：

<script>
        var link = document.querySelector('#link');
        var login = document.querySelector('.login');
        var bg = document.querySelector('.login-bg');
        var closeBtn = document.querySelector('#closeBtn');
        //功能一：点击弹出层，模态框和遮挡层就会显示出来display:none;
        link.addEventListener('click', function() {
                login.style.display = 'block';
                bg.style.display = 'block';
            })
            //功能二：点击关闭按钮，模态框和遮挡层就会隐藏起来display:block;
        closeBtn.addEventListener('click', function() {
                login.style.display = 'none';
                bg.style.display = 'none';
            })
            //功能三：在页面中拖拽的原理：鼠标按下并移动，之后松开鼠标
            //触发事件的鼠标按下mousedown 鼠标移动mousemove 鼠标松开mouseup
            //拖拽过程中，鼠标移动过程中，获得新的值赋值给模态框的left和top值。
            //鼠标按下触发的事件源是最上面那一行，就是模态框的title行
            //模态框的真正位置是：鼠标的坐标 减去 鼠标在盒子内的坐标。
        var title = document.querySelector('#title');
        title.addEventListener('mousedown', function(e) {
            //(1)鼠标按下获得鼠标在盒子内部的坐标
            var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;
            document.addEventListener('mousemove', move) //鼠标移动调用move函数
            function move(e) {
                //(2)鼠标移动的时候，把鼠标在页面中的坐标，减去鼠标在盒子内部的坐标 就是模态框的left 和top
                login.style.left = e.pageX - x + 'px';
                login.style.top = e.pageY - y + 'px';
            }
            //(3)鼠标松开 就停止拖拽，就可以让鼠标移动事件解除
            document.addEventListener('mouseup', function() {
                document.removeEventListener('mousemove', move);
            })
        })
    </script>

---

总结

这是一个很好玩的属性，至少我是乐此不疲。今天小编的分享就到这里了。在接下来的学习中发现了好玩的知识小编我一定会给大家第一时间分享。看到这里就给我点个赞吧！