js基础-属性应用```var div1 =document.querySelector('.div1'); var d

        *{
            padding: 0;
            margin: 0;
        }
        .div1 {
            position: absolute;
            left: 40px;
            top: 50px;
            width: 200px;
            height: 2000px;
            background-color: red;
        }
        .div2 {
            position: absolute;
            margin-left: 20px;
            padding: 10px;
            margin-top: 30px;
            width: 100px;
            height: 100px;
            background-color: black;
            border: 5px solid yellow;
        }
    </style>
    
    
    <body>
<div class="div1">
    <div class="div2">

    </div>
</div>
</body>



var div1 =document.querySelector('.div1');
    var div2 = document.querySelector('.div2');
    console.log(div2.offsetLeft);
    返回当亲元素左边界到他的上级元素左边距的距离 只读
    console.log(div2.offsetTop);
    返回当亲元素左边界到他的上级元素上边距的距离 只读
    console.log(div2.offsetHeight);
    返回元素的高度
    console.log(div2.offsetWidth);
    返回元素的宽度
    console.log(div2.clientHeight);
    返回元素的可见高度
    console.log(div2.clientWidth);
    返回元素的可见宽度
        console.log(document.documentElement.scrollTop||document.body.scrollLeft);
        返回元素滚动条垂直和水平的距离