列舉幾個常用的屬性

client系列

clientWidth - 盒子真實內容的寬度[content+padding左右]，不包括邊線和滾動條

clientHeight - 盒子真實內容的高度[content+padding上下]，不包括邊線和滾動條

clientTop - 盒子上邊框的寬度[border-top]

clientLeft - 盒子左邊框的寬度[border-left]

offset系列：獲取整個盒子的寬高

offsetWidth - 整個盒子的寬度[content+padding+border]

offsetHeight - 整個盒子的高度[content+padding+border]

offsetParent - 父級參照物：一個元素的父級參照物，就看它的父級是否有發生定位，如果有，那麽它的父級就是當前元素的父級參照物，

如果沒有，那麽它的父級參照物就是body

offsetTop - 當前元素的外邊框距離父級參照物內邊距的上偏移量

offsetLeft - 當前元素的外邊框距離父級參照物內邊距的左偏移量

scroll系列

scrollWidth - 盒子真實內容【包括溢出和未溢出】的寬度，沒有溢出的情況下 scrollWidth=clientWidth，有溢出盒子的scrollWidth+溢出寬度

scrollHeight - 盒子真實內容【包括溢出和未溢出】的高度，沒有溢出的情況下 scrollHeight=clientHeight，有溢出盒子的scrollHeight+溢出高度

scrollTop - 盒子向上卷出去的距離

scrollLeft - 盒子向右卷出去的距離

封裝一個獲取當前元素距離body的距離的方法

function offset (ele){
    let l = ele.offsetLeft;
    let t = ele.offsetTop;
    let parent = ele.offsetParent;
    while(parent.tagName !== ‘BODY‘){
        l+= parent.clientLeft + parent.offsetLeft;
        t+= parent.clientTop + parent.offsetTop;
 

        // 需要不斷的跟新父級參照物
        parent = parent.offsetParent
    }
    return {left:l,top:t}
}

JS“盒子模型”