client系列（和內(nèi)容是否溢出盒子無關(guān)）
- clientWidth:內(nèi)容的寬度+左右padding
- clientHeight:內(nèi)容的高度+上下padding
- clientLeft:左邊框的寬度（border-left-width）
- clientTop:上邊框的寬度（border-top-width）
offset系列（和內(nèi)容是否溢出盒子無關(guān)）
- offsetWidth:clientWidth+左右邊框
- offsetHeight:clientHeight+上下邊框
- offsetLeft:子元素的外邊框相對于父定位元素（沒有則指向body）的內(nèi)邊框的偏移量
- offsetTop:子元素的外邊框相對于父定位元素（沒有則指向body）的內(nèi)邊框的偏移量
- offsetParent: 指向子元素的定位父元素逛裤，如果沒有就指向body脯丝，body指向null碌识。
scroll系列
- scrollWidth:當(dāng)內(nèi)容未溢出容器時等于clientWidth.當(dāng)溢出時是真實(shí)寬度+左右padding
- scrollHeight:當(dāng)內(nèi)容未溢出容器時等于clientHeight檐涝。當(dāng)溢出時是真實(shí)高度+上下padding
- scrollTop:滾動條卷去的高度
- scrollLeft:滾動條卷去的寬度
注：如果設(shè)置了overflow:hidden;各瀏覽器結(jié)果不同捣卤。
取值問題
我們通過這13個屬性獲取的都是近似的整數(shù)祠挫。
瀏覽器的盒模型
- 對于瀏覽器而言西饵，clientWidth/clientHeight是當(dāng)前瀏覽器可視窗口的寬高（一屏幕的寬高）
- 對于瀏覽器而言，scrollWidth/scrollHeight是當(dāng)前頁面的真實(shí)寬高（所有屏加起來寬高的近似值）
瀏覽器盒模型屬性獲取/設(shè)置方法的封裝
function win (attr,value) {
if (typeof value !=='undefined') {
return document.documentElement[attr] ||document.body[attr];
}
document.documentElement[attr]=value;
document.body[attr]=value;
}
獲取某元素相對瀏覽器的偏移量 方法的封裝
function offset (curEle) {
var l=curEle.offsetLeft;
var t=curEle.offsetTop;
var par=curEle.offsetParent;
//一層層定位祖先向上累加
while (par) {
if (window.navigator.userAgent.indexOf('MSIE 8.0')!==-1) {
l+=par.clientLeft;
t+=par.clientTop;
}
l+=par.offsetLeft;
t+=par.offsetTop;
par=par.offsetParent;
}
return {left:l,top:t};
}
計算后的樣式值的獲取
一般我們用 元素.style.樣式來獲取元素的樣式犀变。這樣獲取到的是元素的行內(nèi)樣式妹孙。如果想獲取元素經(jīng)過計算后的樣式需要使用window.getComputedStyle(ele,null);
經(jīng)過瀏覽器計算過的樣式是指 只要當(dāng)前標(biāo)簽可以在瀏覽器中呈現(xiàn)出來，那么他所有樣式都是經(jīng)過瀏覽器計算過的获枝，哪怕那些樣式你沒有寫也可以獲取到蠢正。
window.getComputedStyle(box,null)接收兩個參數(shù)。 box指要獲取樣式的元素省店，null指偽類嚣崭。
獲取計算后樣式的 方法封裝
function getCss (curEle,attr) {
var val=null;
try {
val=window.getComputedStyle(curEle,null)[attr];
} catch (e) {
val=curEle.currentStyle[attr];
}
return val;
}
