元素偏移量offset的介绍

分手后的思念是犯贱 2022-12-08 04:52 129阅读 0赞

<!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>