元素偏移量offset的介绍_什么是offset偏移量-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44638167/article/details/108652448

本文介绍了一个简单的HTML页面布局示例，通过CSS样式设置了不同元素的位置，并利用JavaScript获取元素的定位信息及鼠标在其上的坐标。示例展示了offsetTop、offsetLeft等属性的使用方法，以及如何监听鼠标移动事件来获取鼠标相对于指定元素的位置。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            top: 0px;
            margin: 0px;
        }
        .father{
            position: relative;
            width: 200px;
            height: 200px;
            margin-top: 100px;
            margin-left: 100px;
            background-color: red;
        }
        .son{
            width: 50px;
            height: 50px;
            background-color: pink;
            margin-left: 45px;
        }
        .box{
            width: 200px;
            height: 200px;
            margin-left: 100px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="father">
            <div class="son"></div>
    </div>
    <div class="box"></div>
    <script>
        //返回的数值是不带单位 属性的只读
        var father=document.querySelector(".father");
        var son=document.querySelector(".son");
        var box=document.querySelector(".box");
        // offsetTop和offsetLeft是返回带有定位父元素的偏移量,父元素没有定位就是和body的偏移量
        console.log(father.offsetTop);
        console.log(father.offsetLeft);
        console.log(son.offsetLeft);
        // offsetWidth和offsetHeight是返回本身的宽度和高度 
        console.log(son.offsetWidth);
        console.log(son.offsetHeight);
        //offsetParent是返回有定位的父元素,父元素没有定位就返回body
        console.log(son.offsetParent);
        //得到鼠标在盒子中的坐标
        //1 得到鼠标在页面的坐标 然后得到盒子在页面的坐标 就可以得到鼠标在盒子的坐标了
        box.addEventListener("mousemove",function(e){
            var mousex=e.pageX;
            var mousey=e.pageY;
            var boxx=box.offsetLeft;
            var boxy=box.offsetTop;
            var x=mousex-boxx;
            var y=mousey-boxy;
            box.innerHTML='x坐标是' + x + ' y坐标是' + y;
            
        })
    </script>
</body>
</html>