js盒子模型

通過js中提供一系列的方法和屬性獲取頁面中元素的樣式資訊值；

內容的寬高：是給元素定義的width/height這兩個樣式。如果沒有設定height值，容器的高度會根據裡面內容自己適應，這樣獲取的值就是真實的內容的高；如果設定固定的高度，不管內容是多少，內容的高度指的都是設定的這個值；

真實內容的寬高：如果設定的height是200px，如果內容有溢位，那麼真實內容的高度是把溢位內容的高度也要加起來；

clientheight || clientwidth

//內容的寬度/高度+左右/上下填充(padding)
clientleft || clienttop
//左邊框/上邊框的高度

offsetheight || offsetwidth

//clientheight/clientwidth + 左右/上下邊框（和內容是否溢位沒有關係）
offsetparent
//當前元素的父級參照物
offsetleft || offsettop 
//當前元素的外邊框距離父級參照物的內邊框的偏移量

計算元素距離body的上部和左部的距離

function

offset(el) 
oleft += oparent.offsetleft;
otop  += oparent.offsettop;
oparent = oparent.offsetparent;
}return  
}offset(box2);//

scrollheight || scrollwidth

//真實內容的高度/寬度（包含溢位）+ 左填充/上填充
//注:獲取到的結果都是約等於的值，因為同乙個瀏覽器是否設定overflow=hidden對於最終的結果是有影響的；在不同的瀏覽器中我們獲取的結果也是不同的。
scrolltop || scrollleft 
//滾動條卷去的高度

scrollwidth/scrollheight是當前頁面的真實寬度和高度（所有屏的高度和寬度的和：是乙個約等於值）

要相容瀏覽器獲取瀏覽器盒子模型資訊我們需要這樣寫

document.documentelement[attr] || document.body[attr];

//documentelement在前body在後
//獲取
document.documentelement.clientwidth || document.body.clientwidth;
//設定
document.documentelement.scrolltop = 0;
document.body.scrolltop = 0;

function

win(attr,value) 
document.documentelement[attr] = value;
document.body[attr] = value;
}win('clientwidth');
win('scrolltop',0);

js盒子模型

js盒子模型是指通過js中一系列的屬性和方法獲取頁面中元素的樣式資訊值 1 client系列 clientwidth 設定的寬度 width 內邊距 padding 2 clientheight 設定的高度 height 內邊距 padding 2 clientleft 左邊框的寬度 border的...

JS盒子模型

clientwidth 盒子寬度 左右的padding clientheight 盒子高度 上下的padding clientleft 盒子左邊框的寬度 clienttop 盒子上邊框的寬度 offsetwidth clientwidth 左右border offsetheight clienthe...

JS盒子模型

6.js盒子模型 3x4 1 13 個屬性 client系列 clientheight clientwidth 內容的寬度 高度 左右 上下填充 padding 和內容溢位沒有關係 不包括邊框高度 clinettop 上邊框的高度 clinetleft 左邊框的寬度 offset系列 offsetw...