BOM之三大系列(offset-scroll-client)
-
offsetParent(偏移父級)
:返回與當前元素最近的經過定位(position不等於static)的父級元素,有如下情況:
- 若當前元素的父級元素沒有進行CSS定位,offsetParent為body.
- 若當前元素自身有fixed定位,則返回null.(火狐返回body)
- 如果當前元素(自身無fixed定位)的父級元素中有進行CSS定位,offsetParent為離自身元素最近的有CSS定位的父級元素.
- body元素offsetParent返回null
偏移量
-
offsetWidth:
- 獲取元素的可視寬度,無單位.
- 這個寬度包括元素的邊框(border),水平 的padding,垂直滾動條寬度,元素本身寬度.(它不包括偽元素的寬度,如::before 或 ::after)
- 若元素被隱藏,則返回0.
-
offsetHeight:獲取元素的可視高度,無單位;(其餘上同)
-
offsetLeft:獲取元素左外邊框到定位父級的左內邊框的畫素距離;
-
offsetTop:獲取元素傷外邊框到定位父級的上內邊框的畫素距離;
- 沒有脫離文件流:offsetLeft:父級元素margin+父級元素padding+父級元素border+自己的margin;(offsetTop同理)
- 脫離文件流:主要是自己的left(相對於父級)和自己的margin;
scroll系列(捲曲---滾出去)
- scrollWidth:元素中內容的實際的寬(沒有邊框,包含內邊距),如果沒有內容就是元素的寬
- scrollHeight:元素中內容的實際的高(沒有邊框,包含內邊距),如果沒有內容就是元素的高
- scrollTop:向上捲曲出去的距離
- scrollLeft:向左捲曲出去的距離
封裝getScroll函式
//獲取瀏覽器向上向左捲曲出去距離的值 function getScroll(){ return { left : window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0, top :window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0 }; } //測試 window.onscroll = function(){ console.log(getScroll().top); }; } 複製程式碼
client系列
- clientWidth: 可視區域的寬(沒有邊框),邊框內部的寬度
- clientHeight: 可視區域的高(沒有邊框),邊框內部的寬度
- clientLeft: 左邊邊框的寬度
- clientTop: 上邊邊框的寬度
- clientX(clientY):到頂部左部的可視距離
pageX(pageY):獲取向上捲曲與可視距離的和(僅火狐和谷歌支援)
盒子跟著滑鼠飛例項
谷歌火狐支援e物件 IE8支援window.event
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> *{ margin: 0; padding: 0; } body{ height: 2000px; } img{ position: absolute; } #box{ position: absolute; width: 100px; height: 100px; border: 1px solid red; } #img{ position: absolute; width: 100px; height: 100px; border: 1px solid green; } </style> </head> <body> <div id="box"></div> <div id="img"></div> <script src="common.js"></script> <script> //圖片跟著滑鼠飛,可以中任何的瀏覽器中實現 //clientX 和 clientY 單獨的使用的相容程式碼 //scrollLeft 和 scroollTop 的相容程式碼 //pageX, pageY 和 clientX + scrollLeft 和 clientY + scrollTop //把程式碼封裝在物件中 var evt = { //window.event 和 事件引數物件e的相容 getEvent:function(evt){ return window.event || e; }, //可視區域的橫座標的相容程式碼 getClientX:function(evt){ return this.getEvent(evt).clientX; }, //可視區域的縱座標的相容程式碼 getClientY:function(evt){ return this.getEvent(evt).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; }, //相對於頁面的橫座標(pageX 或者 clientX+scrollLeft) getPageX:function(evt){ return this.getEvent(evt).pageX ? this.getEvent(evt).pageX : this.getClientX(evt) + this.getScrollLeft(); }, //相對於頁面的縱座標(pageX 或者 clientY + scrollTop) getPageY:function(evt){ return this.getEvent(evt).pageY ? this.getEvent(evt).pageY : this.getClientY(evt) + this.getScrollTop(); } } document.onmousemove=function (e) { my$("box").style.left=evt.getPageX(e)+"px"; my$("box").style.top=evt.getPageY(e)+"px"; }; </body> </html> 複製程式碼
---來源於教學視訊以及MDN
---記錄自2019.4.16