最新文章專(zhuān)題視頻專(zhuān)題問(wèn)答1問(wèn)答10問(wèn)答100問(wèn)答1000問(wèn)答2000關(guān)鍵字專(zhuān)題1關(guān)鍵字專(zhuān)題50關(guān)鍵字專(zhuān)題500關(guān)鍵字專(zhuān)題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專(zhuān)題關(guān)鍵字專(zhuān)題tag2tag3文章專(zhuān)題文章專(zhuān)題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專(zhuān)題3
問(wèn)答文章1 問(wèn)答文章501 問(wèn)答文章1001 問(wèn)答文章1501 問(wèn)答文章2001 問(wèn)答文章2501 問(wèn)答文章3001 問(wèn)答文章3501 問(wèn)答文章4001 問(wèn)答文章4501 問(wèn)答文章5001 問(wèn)答文章5501 問(wèn)答文章6001 問(wèn)答文章6501 問(wèn)答文章7001 問(wèn)答文章7501 問(wèn)答文章8001 問(wèn)答文章8501 問(wèn)答文章9001 問(wèn)答文章9501
當(dāng)前位置: 首頁(yè) - 科技 - 知識(shí)百科 - 正文

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

來(lái)源:懂視網(wǎng) 責(zé)編:小采 時(shí)間:2020-11-27 20:20:14
文檔

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

總結(jié)JavaScript中的特效系列:一. offset系列1. offset系列的5個(gè)屬性1. offsetLeft : 用于獲取元素到最近的定位父盒子的左側(cè)距離 * 計(jì)算方式: 當(dāng)前元素的左邊框的左側(cè)到定位父盒子的左邊框右側(cè) * 如果父級(jí)盒子沒(méi)有定位, 那么會(huì)接著往上找有定位的盒子 * 如果上級(jí)元素都沒(méi)有定位,那么最
推薦度:
導(dǎo)讀總結(jié)JavaScript中的特效系列:一. offset系列1. offset系列的5個(gè)屬性1. offsetLeft : 用于獲取元素到最近的定位父盒子的左側(cè)距離 * 計(jì)算方式: 當(dāng)前元素的左邊框的左側(cè)到定位父盒子的左邊框右側(cè) * 如果父級(jí)盒子沒(méi)有定位, 那么會(huì)接著往上找有定位的盒子 * 如果上級(jí)元素都沒(méi)有定位,那么最

一. offset系列

1. offset系列的5個(gè)屬性

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

2. 與style.(left/top/width/height)的區(qū)別:

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

二. scroll系列

1.scroll系列的4個(gè)屬性

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í),元素向左卷曲出去的距離

2. 兼容問(wèn)題

(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

三. client系列

1.client系列的4個(gè)常用屬性(clientTop和clientLeft這里不予介紹)

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)

2. 兼容問(wèn)題

(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;
 }
 };

四.總結(jié)

網(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

文檔

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

總結(jié)JavaScript中的特效系列:一. offset系列1. offset系列的5個(gè)屬性1. offsetLeft : 用于獲取元素到最近的定位父盒子的左側(cè)距離 * 計(jì)算方式: 當(dāng)前元素的左邊框的左側(cè)到定位父盒子的左邊框右側(cè) * 如果父級(jí)盒子沒(méi)有定位, 那么會(huì)接著往上找有定位的盒子 * 如果上級(jí)元素都沒(méi)有定位,那么最
推薦度:
標(biāo)簽: 中的 特效 js
  • 熱門(mén)焦點(diǎn)

最新推薦

猜你喜歡

熱門(mén)推薦

專(zhuān)題
Top