javascript 盒子模型

標籤：

oDiv.clientWidth---》width+左右padding
oDiv.clientHeight---》height+上下padding
oDiv.clientTop---》上邊框的高度
oDiv.clientLeft---》左邊框的寬度

oDiv.offsetWidth---》clientWidth+左右邊框的寬度
oDiv.offsetHeight---》clientHeight+上下邊框的高度
offsetLeft---》當前元素距離父級參照物的左位移量(從最外面的邊框開始算，也就是得到的值不包含我們的邊框的寬度)
offsetTop---》 當前元素距離父級參照物的上位移量(從最外面的邊框開始算，也就是得到的值不包含我們的邊框的寬度)

console.log(oDiv.scrollWidth);
console.log(oDiv.scrollHeight);
1)在沒有內容溢出的情況下：
和我們的clientWidth/clientHeight值相等
2)在有內容溢出的情況下:
不管是否隱藏了溢出的內容(overflow: hidden)，我們的計算是這樣處理的:
scrollWidth 約等於 實際內容的真實寬度(被內容撐開後的寬度)+左padding
scrollHeight 約等於 實際內容的真實高(被內容撐開後的高度)+上padding

console.log(document.documentElement.scrollHeight||document.body.scrollHeight);
在真實項目中我們通常用scrollHeight擷取當前HTML頁面的總高度(不管有幾屏的內容我們都算上)


document.documentElement.clientHeight||document.body.clientHeight
只擷取當前瀏覽器一屏的高度

先寫document.documentElement在寫document.body，這樣就可以完全的相容了

 

摘自“珠峰培訓"

javascript 盒子模型