總結(jié)JavaScript中的特效系列

1. offsetLeft : 用于獲取元素到最近的定位父盒子的左側(cè)距離 * 計(jì)算方式: 當(dāng)前元素的左邊框的左側(cè)到定位父盒子的左邊框右側(cè) * 如果父級(jí)盒子沒(méi)有定位, 那么會(huì)接著往上找有定位的盒子 * 如果上級(jí)元素都沒(méi)有定位,那么最后距離是與body的left值

2. offsetTop : 用于獲取元素到最近定位父盒子的頂部距離 * 計(jì)算方式:當(dāng)前元素的上邊框的上側(cè)到定位父盒子的上邊框下側(cè) * 如果父級(jí)盒子沒(méi)有定位,那么會(huì)接著往上找有定位的盒子 * 如果上級(jí)元素都沒(méi)有定位,那么最后距離是與body的top值

3. offsetWidth :用于獲取元素的真實(shí)寬度(除了margin以外的寬度)

4. offsetHeight : 用于獲取元素的真實(shí)高度(除了margin以外的高度)

5. offsetParent :用于獲取該元素中有定位的最近父級(jí)元素 * 如果當(dāng)前元素的父級(jí)元素都沒(méi)有進(jìn)行定位,那么offsetParent為body

1. offset系列的是只讀屬性,而通過(guò)style的方式可以讀寫(xiě)2. offset系列返回的數(shù)值類(lèi)型(結(jié)果四舍五入),style返回的是字符串3. offsetLeft 和 offsetTop 可以返回沒(méi)有定位的元素的left值和top值,而style不可以

1. scrollHeight :元素中內(nèi)容的實(shí)際高度(沒(méi)有邊框) * 如果內(nèi)容不足,就是元素的高度2. scrollWidth: 元素中內(nèi)容的實(shí)際寬度(沒(méi)有邊框) * 如果內(nèi)容不足,就是元素的寬度3. scrollTop: onscroll事件發(fā)生時(shí),元素向上卷曲出去的距離4. scrollLeft : onscroll事件發(fā)生時(shí),元素向左卷曲出去的距離

* 未聲明 DTD: 谷歌,火狐,IE9+支持

 document.body.scrollTop/scrollLeft* 已經(jīng)聲明DTD:IE8以下支持

 document.documentElement.scrollTop/scrollLeft 

* 火狐/谷歌/ie9+以上支持的 window.pageYOffest/pageXOffest

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

1. clientWidth : 獲取網(wǎng)頁(yè)可視區(qū)域的寬度2. clientHeight: 獲取網(wǎng)頁(yè)可視區(qū)域的高度3. clientX :獲取鼠標(biāo)事件發(fā)生時(shí)的應(yīng)用客戶端區(qū)域的水平坐標(biāo)4. clientY :獲取鼠標(biāo)事件發(fā)生時(shí)的應(yīng)用客戶端區(qū)域的垂直坐標(biāo)

 //由瀏覽器對(duì)象不同導(dǎo)致* 未聲明 DTD: 谷歌,火狐,IE9+支持

document.body.clientWidth/clientHeight* 已經(jīng)聲明DTD:IE8以下支持

document.documentElement.clientWidth/clientHeight* 火狐/谷歌/ie9+以上支持的 window.innerWidth/innerHeight

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().width2. 取得clientHeight的值: client().height

 //由事件參數(shù)對(duì)象的兼容性問(wèn)題導(dǎo)致1. 谷歌,火狐,IE9+: 事件參數(shù)對(duì)象隨著事件處理函數(shù)的參數(shù)傳入2. IE8以下: event對(duì)象必須作為window對(duì)象的一個(gè)屬性(window.event)

//將client和scroll的兼容問(wèn)題進(jìn)行對(duì)象的封裝var evtTools={//獲取兼容的事件參數(shù)對(duì)象
 getEvt:function (e) {return window.event?window.event:e;
 },//獲取的是可視區(qū)域的橫坐標(biāo)
 getClientX:function (e) {return this.getEvt(e).clientX;
 },//獲取的是可視區(qū)域的縱坐標(biāo)
 getClientY:function (e) {return this.getEvt(e).clientY;
 },//獲取向左卷曲出去的距離的橫坐標(biāo)
 getScrollLeft:function () {return window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0;
 },//獲取向上卷曲出去的距離的縱坐標(biāo)
 getScrollTop:function () {return window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0;
 }
 };

網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘?document.body.clientWidth;
網(wǎng)頁(yè)可見(jiàn)區(qū)域高： document.body.clientHeight;
網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬);
網(wǎng)頁(yè)可見(jiàn)區(qū)域高： document.body.offsetHeight (包括邊線的寬);
網(wǎng)頁(yè)正文全文寬： document.body.scrollWidth;
網(wǎng)頁(yè)正文全文高： document.body.scrollHeight;
網(wǎng)頁(yè)被卷去的高： document.body.scrollTop;
網(wǎng)頁(yè)被卷去的左： document.body.scrollLeft;
網(wǎng)頁(yè)正文部分上： window.screenTop;
網(wǎng)頁(yè)正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的寬： window.screen.width;
屏幕可用工作區(qū)高度： window.screen.availHeight;
屏幕可用工作區(qū)寬度：window.screen.availWidth;