1. 程式人生 > >JS“盒子模型”

JS“盒子模型”

UNC 獲取 常用 模型 邊線 idt con 定位 clas

列舉幾個常用的屬性

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“盒子模型”