一. offset系列
1. offset系列的5個屬性
1. offsetLeft : 用於獲取元素到最近的定位父盒子的左側距離
* 計算方式: 當前元素的左邊框的左側到定位父盒子的左邊框右側
* 若是父級盒子沒有定位, 那麼會接着往上找有定位的盒子
* 若是上級元素都沒有定位,那麼最後距離是與body的left值
2. offsetTop : 用於獲取元素到最近定位父盒子的頂部距離
* 計算方式:當前元素的上邊框的上側到定位父盒子的上邊框下側
* 若是父級盒子沒有定位,那麼會接着往上找有定位的盒子
* 若是上級元素都沒有定位,那麼最後距離是與body的top值
3. offsetWidth :用於獲取元素的真實寬度(除了margin之外的寬度)
4. offsetHeight : 用於獲取元素的真實高度(除了margin之外的高度)
5. offsetParent :用於獲取該元素中有定位的最近父級元素
* 若是當前元素的父級元素都沒有進行定位,那麼offsetParent爲body
2. 與style.(left/top/width/height)的區別:
1. offset系列的是隻讀屬性,而經過style的方式能夠讀寫 2. offset系列返回的數值類型(結果四捨五入),style返回的是字符串 3. offsetLeft 和 offsetTop 能夠返回沒有定位的元素的left值和top值,而style不能夠
二. scroll系列
1.scroll系列的4個屬性
1. scrollHeight :元素中內容的實際高度(沒有邊框)
* 若是內容不足,就是元素的高度
2. scrollWidth: 元素中內容的實際寬度(沒有邊框)
* 若是內容不足,就是元素的寬度
3. scrollTop: onscroll事件發生時,元素向上捲曲出去的距離
4. scrollLeft : onscroll事件發生時,元素向左捲曲出去的距離
2. 兼容問題
(1) 兼容問題瀏覽器
* 未聲明 DTD: 谷歌,火狐,IE9+支持 document.body.scrollTop/scrollLeft * 已經聲明DTD:IE8如下支持 document.documentElement.scrollTop/scrollLeft * 火狐/谷歌/ie9+以上支持的 window.pageYOffest/pageXOffest
(2) 兼容代碼函數
function getScroll() {
return {
left: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0,
top: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0
};
}
使用方法:
1. 取得scrollLeft值: getScroll().left
2. 取得scrollTop值: getScroll().top
三. client系列
1.client系列的4個經常使用屬性(clientTop和clientLeft這裏不予介紹)
1. clientWidth : 獲取網頁可視區域的寬度 2. clientHeight: 獲取網頁可視區域的高度 3. clientX :獲取鼠標事件發生時的應用客戶端區域的水平座標 4. clientY :獲取鼠標事件發生時的應用客戶端區域的垂直座標
2. 兼容問題
(1) clientWidth 和 clientHeight的兼容問題this
//由瀏覽器對象不一樣致使 * 未聲明 DTD: 谷歌,火狐,IE9+支持 document.body.clientWidth/clientHeight * 已經聲明DTD:IE8如下支持 document.documentElement.clientWidth/clientHeight * 火狐/谷歌/ie9+以上支持的 window.innerWidth/innerHeight
(2) clientWidth 和 clientHeight的兼容代碼spa
function client(){
if(window.innerWidth){
return {
"width":window.innerWidth,
"height":window.innerHeight
};
}else if(document.compatMode === "CSS1Compat"){
return {
"width":document.documentElement.clientWidth,
"height":document.documentElement.clientHeight
};
}else{
return {
"width":document.body.clientWidth,
"height":document.body.clientHeight
};
}
}
使用方法:
1. 取得clientWidth的值: client().width
2. 取得clientHeight的值: client().height
(3)clientX 和 clientY的兼容問題code
//由事件參數對象的兼容性問題致使 1. 谷歌,火狐,IE9+: 事件參數對象隨着事件處理函數的參數傳入 2. IE8如下: event對象必須做爲window對象的一個屬性(window.event)
(4)clientX 和 clientY的兼容性代碼對象
//將client和scroll的兼容問題進行對象的封裝
var evtTools={
//獲取兼容的事件參數對象
getEvt:function (e) {
return window.event?window.event:e;
},
//獲取的是可視區域的橫座標
getClientX:function (e) {
return this.getEvt(e).clientX;
},
//獲取的是可視區域的縱座標
getClientY:function (e) {
return this.getEvt(e).clientY;
},
//獲取向左捲曲出去的距離的橫座標
getScrollLeft:function () {
return window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0;
},
//獲取向上捲曲出去的距離的縱座標
getScrollTop:function () {
return window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0;
}
};
四.總結
網頁可見區域寬： document.body.clientWidth; 網頁可見區域高： document.body.clientHeight; 網頁可見區域寬： document.body.offsetWidth (包括邊線的寬); 網頁可見區域高： document.body.offsetHeight (包括邊線的寬); 網頁正文全文寬： document.body.scrollWidth; 網頁正文全文高： document.body.scrollHeight; 網頁被捲去的高： document.body.scrollTop; 網頁被捲去的左： document.body.scrollLeft; 網頁正文部分上： window.screenTop; 網頁正文部分左： window.screenLeft; 屏幕分辨率的高： window.screen.height; 屏幕分辨率的寬： window.screen.width; 屏幕可用工做區高度： window.screen.availHeight; 屏幕可用工做區寬度：window.screen.availWidth;