属性

<script>
    let divDom = document.querySelector('div')
    /* width 只是content的宽度 */
    // console.log( window.getComputedStyle(divDom,null).width )
    /* offsetWidth = content 宽度 + 左右的padding + 左右的border */
    // console.log( divDom.offsetWidth );
    // console.log( divDom.offsetHeight );
    /* clientWidth = content 宽度 + 左右的padding */
    // console.log( divDom.clientWidth );
    // console.log( divDom.clientHeight );

    /* 在正常文档流下 offsetLeft（13） = body的margin-left（8） + divDom的margin-left（5） */
    /* 脱离文档流的情况下 offsetLeft（25） = divDom的left（20） + divDom的margin-left（5） */
    // console.log(divDom.offsetLeft);
    /* 在正常文档流下 offsetTop（8） = body的margin-top（8） */
    /* 脱离文档流的情况下 offsetTop（15） = divDom的top（10） + divDom的margin-left（5） */
    // console.log(divDom.offsetTop);

    /* offsetParent 自己相对于谁（父元素）偏移  */
    // console.log( divDom.offsetParent ); => body
    // let c = document.getElementsByClassName('c')[0];
    /* c是绝对定位 是相对于divDom偏移的 所以他的偏移父元素是divDom  */
    // console.log( c.offsetParent ); /* =>divDom */

    /* offsetParent 如果子元素的父元素是已经定位（relative,absolute,fixed）的元素,
    那么他的offsetParent就是已经定位的父元素
    如果不是已经定位的元素，那么他的offsetParent就是body
    */

    function getScroll(){
        /* 获取滚动条距离顶部的高度 */
        console.log( document.documentElement.scrollTop );
    }

    /* 滚动条 滚动事件 */
    document.onscroll = function (){
        console.log( document.documentElement.scrollTop );
       
    }


</script>