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í),元素向左卷曲出去的距離
(1) 兼容問(wèn)題
* 未聲明 DTD: 谷歌,火狐,IE9+支持 document.body.scrollTop/scrollLeft* 已經(jīng)聲明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
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)
(1) clientWidth 和 clientHeight的兼容問(wèn)題
//由瀏覽器對(duì)象不同導(dǎo)致* 未聲明 DTD: 谷歌,火狐,IE9+支持 document.body.clientWidth/clientHeight* 已經(jīng)聲明DTD:IE8以下支持 document.documentElement.clientWidth/clientHeight* 火狐/谷歌/ie9+以上支持的 window.innerWidth/innerHeight
(2) clientWidth 和 clientHeight的兼容代碼
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
(3)clientX 和 clientY的兼容問(wèn)題
//由事件參數(shù)對(duì)象的兼容性問(wèn)題導(dǎo)致1. 谷歌,火狐,IE9+: 事件參數(shù)對(duì)象隨著事件處理函數(shù)的參數(shù)傳入2. IE8以下: event對(duì)象必須作為window對(duì)象的一個(gè)屬性(window.event)
(4)clientX 和 clientY的兼容性代碼
//將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;
聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com