一 scroll系列屬性 ? ? ?——滾動 1 scrollHeight/scrollWidth 標簽內部實際內容的高度/寬度 ele.scrollHeight 有兩種情況， 當內容超出盒子范圍后，返回的是內容的高度，包括padding，從頂部內側到內容的最外部分。 當內容不超出盒子范圍時，返回的是盒子的高度，就是 ele.scrollHeight == ele.clientHeight,最小值就是ele.clientHeight ele.scrollWidth 情況同 ele.scrollHeight一樣。 當內容超出盒子范圍后，返回的是內容的寬度，包括padding，從左邊內側到內容的最外部分。 當內容不超出盒子范圍時，返回的是盒子的寬度，就是 ele.scrollWidth == ele.clientWidth,最小值就是ele.clientHeight 各個瀏覽器說法不一： IE、Opera 認為 scrollHeight 是網頁內容實際高度，可以小于 clientHeight。 NS、FF 認為 scrollHeight 是網頁內容高度，不過最小值是 clientHeight。 2 scrollTop／scrollLeft ele.scrollTop ?滾動時返回的是被卷去部分的頂部到可視區(qū)域的頂部，看圖 ele.scrollLeft ?滾動時返回的是被卷去部分的左側到可視區(qū)域的左側，看圖 函數封裝 ? ?----獲取卷曲的寬度和高度 function myScroll() {return {top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0　　} } eg：document.documentElement-----html標簽 ? ?　　　　document.body ? ? ? ? ? ?------body內部 ps！ 想要實時獲取頁面卷曲的高度或寬度，必須在事件內進行 window.onscroll = function(){} 3 scrollTo window.scrollTo(1500,2000);//參數1 表示橫向滾動到的位置 //參數2 表示縱向滾動到的位置 二 client系列屬性 ? ? ? ?——可視
1. ?clientWidth／clientHeight ? ele.clientWidth 返回元素內部空間的寬度（width+padding）,是一個只讀屬性。不包含border和margin以及縱向滾動條。 (ele.clientWidth = width + padding - 滾動條的高度) ele.clientHeight 返回元素內部空間的高度（height+padding）,是一個只讀屬性。不包含border和margin以及橫向滾動條。 (Ele.clientHeight = height + padding - 滾動條的寬度) @ 和offsetWidth／offsetHeight 的區(qū)別： offsetWidth包含border，而clientWidth不包含border。 scrollHeight的最小值和clientHeight相同 ? 2? clientTop／clientLeft ele.clientTop 表示一個元素的左邊框的寬度，以像素表示。是一個只讀屬性 如果元素的文本方向是從右向左（RTL, right-to-left），并且由于內容溢出導致左邊出現了一個垂直滾動條，則該屬性包括滾動條的寬度（默認17px）。 clientLeft 不包括左外邊距和左內邊距 （ele.clientLeft = border-left-width + 滾動條的寬度） ele.clientLeft 一個元素頂部邊框的寬度（以像素表示）。不包括頂部外邊距或內邊距。 （ele.clientTop = border-top-width）? 函數封裝： function myClient() {return {width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0} }

?

三? offset系列的屬性 　1. ?offsetWidth／offsetHeight ? ele.offsetWidth ? ?它返回該元素的像素寬度，（box-sizing:content-box）默認情況下：寬度包含該元素的水平內邊距和邊框，（除了margin以外：border+padding+width）且是一個整數? ? ? ?　　ele.offsetHeight ? 它返回該元素的像素高度 （box-sizing:content-box）默認情況下：高度包含該元素的垂直內邊距和邊框，（除了margin以外：border+padding+width）且是一個整數? ? ? ? ps：元素的offsetHeight，offsetWidth是一種元素CSS高度的衡量標準，包括元素的邊框、內邊距和元素的水平滾動條或縱向滾動條（如果存在且渲染的話），不包含:before或:after等偽類元素的高度 offsetWidth和offsetHeight是用來得到元素的大小 @offsetHeight 和 style.height的區(qū)別 demo.style.height只能獲取行內樣式，如果樣式寫到了其他地方，甚至根本就沒寫，便無法獲取 style.height是字符串（而且?guī)挝?#xff09;，offsetHeight是數值 demo.style.height可以設置行內樣式，offsetHeight是只讀屬性 2. ?offsetLeft／offsetTop ? ? ele.offsetLeft ? ? 到距離自身最近的（帶有定位的）父元素的 左側 的距離,如果所有父級都沒有定位則以body 為準. offsetLeft 是自身border左側到父級padding左側的距離? -----數值 ele.offsetTop ? ? ?到距離自身最近的（帶有定位的）父元素的 頂側 的距離,如果所有父級都沒有定位則以body 為準.? ? ? ----數值 offsetLeft和offsetTop是用來得到元素的位置 @offsetLeft和style.left的區(qū)別 style.left只能獲取行內樣式 offsetLeft只讀，style.left可讀可寫 offsetLeft是數值，style.left是字符串并且有單位px 如果沒有加定位，style.left獲取的數值可能是無效的 最大區(qū)別在于offsetLeft以border左上角為基準，style.left以margin左上角為基準 計算方式：從定位的父盒子的邊框內部，計算到子盒子的邊框外部（邊框到邊框） 特點： 1、offsetLeft屬性沒有單位，是純數值 2、offsetLeft屬性是只讀的，不可修改 3、offsetLeft屬性若有小數，會四舍五入進位 　3.offsetParent? ?獲取到當前元素外面的定位父盒子 HTMLElement.offsetParent 是一個只讀屬性，返回一個指向最近的（closest，指包含層級上的最近）包含該元素的定位元素。如果沒有定位的元素，則 offsetParent 為最近的 table, table cell 或根元素（標準模式下為 html；quirks 模式下為 body）。當元素的 style.display 設置為 "none" 時，offsetParent 返回 null。 (offsetParent 很有用，因為 offsetTop 和 offsetLeft 都是相對于其內邊距邊界的。) @ offsetParent和parentNode的區(qū)別 父元素parentNode，一定是親爹，外面緊挨著的元素 定位父盒子offsetParent，干爹（有可能是親爹，也可能不是親爹） 　方法： // 獲取所選元素到瀏覽器最左邊的距離 var getOffsetLeft = function(obj){var tmp = obj.offsetLeft;var val = obj.offsetParent;while(val != null){tmp += val.offsetLeft;val = val.offsetParent;}return tmp; }

　　

//獲取所選元素到瀏覽器最上邊的距離 var getOffsetTop = function(obj){var tmp = obj.offsetTop;var val = obj.offsetParent;while(val != null){tmp += val.offsetTop;val = val.offsetParent;}return tmp; }

轉載于:https://www.cnblogs.com/sqh17/p/10217159.html

總結

以上是生活随笔為你收集整理的offset系列,client系列,scroll系列回顾的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。