javascript基礎學習系列-DOM盒子模型常用屬性
阿新 • • 發佈：2018-03-30
ica ace img 根據 盒子模型常用屬性 平面 html firefox sta
最近在學習DOM盒子模型，各種屬性看著眼花繚亂，下面根據三個系列來分別介紹一下：
client系列
- clientWidth ：width+(padding-left)+(padding-right)—>和內容溢出無關系
- clientHeight：height+(padding-top)+(padding-bottom)—>和內容溢出無關系
- clientLeft：左邊框的寬度
- clientTop：上邊框的高度（border[Left/Top]Width）
offset系列
- offsetParent：當前元素的父級參照（父級參照物），在同一個平面中，最外層的元素是裏面所有元素的父級參照物（和html層級結構沒有必然聯系）
a）一般來說一個頁面中所有元素的父級參照物都是body
b）body的父級參照物->document.body.offsetParent->null
c）可以通過position：absolute/realative/fixed改變父級參照物
我們可以總結一下規律:
position為fixed元素是沒有offsetParent，但firefox統一返回body。
position為absolute, relative的元素的offsetParent總是為其最近的已定位
的元素,沒有找最近的td,th元素，再沒有找body。
position為static的元素的offsetParent則是先找最近的td,th元素，再沒有找body。
body為最頂層的offsetParent。
- offsetWidth/offsetHeight：clientWidth/ clientHeight+左右/上下邊框 —>和內容溢出無關系
- offseTop/offsetLeft：當前元素的外邊框距離父級參照物內邊框的偏移量
scroll系列
- scrollWidth/scrollHeight：和clientWidth／clientHeight一樣（前提是：內容無溢出）
若容器內容有溢出：獲取結果是如下規則：
scrollWidth：真實內容的寬度（包含溢出）+左填充
scrollHeight：真實內容的高度（包含溢出）+上填充。
- scrollLeft／scrollTop（可讀寫 ）：滾動條卷曲的寬度和高度
scrollTop有兩個臨界值，最大值和最小值
滾動最小值：0，dom.scrollTop=一個小於0的數，滾動條也是滾動到頂部
滾動最大值：scrollHeight-clientHeight ,dom.scrollTop=一個大於（scrollHeight-clientHeight）的數，滾動條也是在最底部
通過以上我畫了一張圖，對照圖看頓時你會覺得恍然大悟！請看下圖：
javascript基礎學習系列-DOM盒子模型常用屬性