js之pc端网页特效，获取元素偏移，获取元素大小，offset和style区别以及案例

本文链接：https://blog.youkuaiyun.com/m0_61547956/article/details/124496546

本文详细介绍了JavaScript中的offset系列属性，包括offsetLeft、offsetTop、offsetWidth和offsetHeight，以及它们与style属性的区别。通过三个案例——获取鼠标坐标、拖动模态框和仿京东放大镜效果，阐述了这些属性在实现网页特效中的实际应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

offsetLeft和offsetTop获取元素偏移

offset系列属性可以动态获得元素的位置，大小等，不需要我们去看css了，没有right和bottom。

获得元素的距离以带有定位的父盒子为准，返回的数值不带单位，如果父盒子没有定位，就往上找，直到找到带有定位的父盒子，如果没有就以body为准。

offsetWidth和offsetHeight获取元素的大小

返回的数值不带单位，包含padding和border值

offsetParent

返回带有定位的父盒子，parentNode是返回最近的父盒子，不管有没有定位。

offset属性和style的区别

offset可以得到样式表中任意的样式值，style只能得到行内样式表中的值

offset返回的数值没有单位，style得到的数值有单位

offsetWidth中包含padding和border值，style不包含

offset获得的width属性只能读，不能修改赋值，style可以进行重新赋值

offset获取元素大小位置用这个合适 style更改值方便

案例一获取鼠标在盒子内的坐标

盒子带有定位，点击可以获得鼠标的offsetLeft和offsetTop，用e.pageX-offsetLeft就可以获得鼠标在盒子内的x坐标。

  <!-- 点击就可以得到鼠标距离盒子左右的距离
鼠标在页面的坐标
通过offsetLeft
然后相减
 -->
    <div></div>
    <script>
        var div = document.querySelector('div');
        div.addEventListener('click', function(e) {
            // console.log(e.pageX);
            var a = e.pageX - div.offsetLeft;
            var b = e.pageY - div.offsetTop;
            console.log(a);
            console.log(b);
            // console.log('点击了');
        })
    </script>

案例二拖动模态框（弹出框）

1.点击弹出登录框文字后，弹出模态框同时背景变色。点击关闭按钮后，模态框和背景隐藏。

先让模态框和背景设为display:none,点击弹出文字后变为display:block,点击关闭按钮后再变为display:none。

var login = document.querySelector('.login');
        var mask = document.querySelector('.login-bg');
        var link = document.querySelector('.link');
        var close = document.querySelector('.close');
        var title = document.querySelector('#title');
        //点击 显示出来
        link.addEventListener('click', function() {
                mask.style.display = 'block';
                login.style.display = 'block';
            })
            //点击查号隐藏
        close.addEventListener('click', function() {
                mask.style.display = 'none';
                login.style.display = 'none';
            })

2.鼠标按下登录会员区域可以拖动模态框在页面移动。

登录框设为固定定位。

给登录会员区域的盒子添加鼠标按下事件，获取鼠标在盒子内的坐标，e.pageX-盒子.offsetLeft。然后添加鼠标移动事件，鼠标移动时重新设置盒子的left值与top值。

  //拖拽事件 鼠标按下去 移动 松开
            //鼠标的坐标减去鼠标在盒子内的坐标 盒子内的坐标是不会变的 

        title.addEventListener('mousedown', function(e) {
                var x = e.pageX - login.offsetLeft;
                var y = e.pageY - login.offsetTop;
                //鼠标在盒子内的坐标
                document.addEventListener('mousemove', fn)

                function fn(e) {
                    login.style.left = e.pageX - x + 'px';
                    login.style.top = e.pageY - y + 'px';
                    console.log(this);
                }

3.松开鼠标模态框停止移动。

消除鼠标移动事件。

  document.addEventListener('mouseup', function() {
                    document.removeEventListener('mousemove', fn);
                })
            })

完整代码

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        a {
            text-decoration: none;
            color: black;
        }
        
        .login-header {
            position: absolute;
            width: 300px;
            margin: 0 auto;
            font-size: 20px;
        }
        
        .login {
            display: none;
            position: fixed;
            left: 50%;
            top: 50%;
            /* margin-left: -250px;
            margin-top: -200px; */
            transform: translate(-50%, -50%);
            width: 500px;
            height: 400px;
            background-color: #fff;
        }
        
        .login-bg {
            display: none;
            width: 100%;
            height: 1000px;
            background: rgba(0, 0, 0, .1);
        }
        
        .login-title {
            height: 60px;
            font-size: 20px;
            text-align: center;
            line-height: 60px;
        }
        
        .login-title .close {
            position: absolute;
            top: -20px;