元素偏移量 offset

目录

一、元素偏移量offset

1、offset 概述

 2、offset 与 style 区别

3、模态框拖曳效果 案例

---

一、元素偏移量offset

1、offset 概述

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

• 获得元素距离带有定位父元素的位置
• 获得元素自身的大小（宽度高度）
• 注意： 返回的数值都不带单位

属性	说明
offsetLeft	返回元素相对其带有定位的父元素左边框的偏移
offsetTop	返回元素相对其带有定位的元素上方的偏移父
offsetWidth	返回自身的宽度（包括padding、边框和内容区域的宽度）。注意返回数值不带单位
offsetHeight	返回自身的高度（包括padding、边框和内容区域的高度）。注意返回数值不带单位
offsetParent	返回作为该元素带有定位元素的父级元素（如果父级都没有定位则返回body）

获取鼠标位置：鼠标指针在盒子内的坐标位置示意图分析。

            

案例：获取鼠标在盒子内位置坐标

案例分析:

① 我们在盒子内点击，想要得到鼠标距离盒子左右的距离。

② 首先得到鼠标在页面中的坐标（e.pageX, e.pageY）

③ 其次得到盒子在页面中的距离 ( box.offsetLeft, box.offsetTop)

④ 用鼠标距离页面的坐标减去盒子在页面中的距离，得到 鼠标在盒子内的坐标

⑤ 如果想要移动一下鼠标，就要获取最新的坐标，使用鼠标移动事件 mousemov

// 获取鼠标在盒子内位置坐标

<div id="box"></div>
<script>
  var box = document.getElementById('box');
  console.log(box.offsetWidth); // 打印盒子的宽度
   console.log(box.offsetHeight); // 打印盒子的高度
   box.onmousemove = function(e) {
   …（省略计算鼠标在盒子内的坐标）
 };
</script>

 2、offset 与 style 区别

offset	style
offset 可以得到任意样式表中的样式值	style 只能得到行内样式表中的样式值
offset 系列获得的数值是没有单位的	style.width 获得的是带有单位的字符串
offsetWidth 包含padding+border+width	style.width 获得不包含padding和border 的值
offsetWidth 等属性是只读属性，只能获取不能赋值	style.width 是可读写属性，可以获取也可以赋值
所以，我们想要获取元素大小位置，用offset更合适	所以，我们想要给元素更改值，则需要用style改

3、模态框拖曳效果 案例

案例分析设计图：

                          

// 模态框结构
<div class="login-bg"></div>
    <!-- 模态对话框 -->
    <div class="modal">
        <form>
            <div class="item1">登录会员</div>
            <div class="item2">
                <div class="username">
                    <label>
                        用户名：
                        <input type="text" name="username">
                    </label>
                </div>
                <div class="password">
                    <label>
                        登录密码：
                        <input type="password" name="password">
                    </label>
                </div>
            </div>
            <!-- 按钮 -->
            <div class="item1">
                <div class="vip">登录会员</div>
            </div>
        </form>
        <!-- 关闭按钮X -->
        <div class="close">X</div>
    </div>
    <!-- 单击,弹出登录窗口 -->
    <div class="login-header">单击,登录会员...</div>

// 模态框功能

 //1.获取页面元素
        var modal = document.querySelector(".modal");
        var close = document.querySelector(".close");
        var login = document.querySelector(".login-header");
        var bg = document.querySelector(".login-bg");
        //2.给遮罩层注册click事件
        login.addEventListener('click',function(){
            modal.style.display = 'block';
            bg.style.display = 'block';
            modal.style.backgroundColor = 'white';
        })
        //3.给close注册click事件
        close.addEventListener('click',function(){
            modal.style.display = 'none';
            bg.style.display = 'none';
        })
        //4. 给modal注册mousedown事件
        modal.addEventListener('mousedown',function(e){
            //4.1 获取鼠标按下时，鼠标指针在模态框中的坐标
            var x = e.pageX - modal.offsetLeft;
            var y = e.pageY - modal.offsetTop;
            //4.2 定义移动的函数
            var move = function(e){
                modal.style.left = e.pageX - x + 'px';
                modal.style.top = e.pageY - y + 'px';
            }
            //4.3 给文档对象注册鼠标移动事件(mousemove)
            document.addEventListener('mousemove',move);
            //4.4 给文档注册鼠标弹起事件(mouseup)
            document.addEventListener('mouseup',function(){
                document.removeEventListener('mousemove',move);
            })
        })

效果如下：