offset 的用法

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>offset</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            border:10px solid red;
            /* display: none; */
            margin:  20px; 
            /* position: absolute; */
        }
        .son{
            width: 50px;
            height: 50px;
            background: pink;
            margin-left: 20px;
            margin-top: 20px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
        </div>
    </div>
    <div class="sub"></div>
    <script type="text/javascript">
        var son = document.querySelector('.son')
        var father = document.querySelector('.father')
    //offset 智能读取
        console.log(father.offsetLeft)
        console.log(father.offsetTop)
        // 盒子 的宽度
        console.log(son.offsetWidth)
        // 盒子 的高度
        console.log(son.offsetHeight)
        // 盒子 和浏览器边框的x轴距离
        console.log(son.offsetTop)
        // 盒子 和浏览器边框的Y轴距离
        console.log(son.offsetLeft)
        //寻找有定位的父级 如果没有定位 直接找到 body
        console.log(son.offsetParent)
    </script>
</body>
</html>
相关文章
