javascript中offset、client、scroll的屬性總結_javascript技巧

　　第一組：offsetWidth,offsetHeight,offsetLeft,offsetTop,offsetParent

　 第二組：clientWidth,clientHeight,clientLeft,clientTop

　　第三組：scrollWidth,scrollHeight,scrollLeft,scrollTop

　　詳細定義如下：

　　1.1 HTML元素的offsetWidth,offsetHeight以CSS像素返回它的屏幕尺寸，包含元素的邊框和內邊距，不包含外邊距。

　　1.2 offsetLeft和offsetTop屬性返回元素的X和Y坐標。通常，它們返回值即是文檔坐標。但對于已定位元素的后代元素和一些其他元素（如表格單元），這些屬性返回的坐標是相對于祖先元素的而非文檔。

　　1.3 offsetParent屬性指定offsetLeft,offsetTop相對的父元素。如果offsetParent為null，后兩者的返回值則為文檔坐標。因此一般來說，用offsetLeft和offsetTop來計算元素e的位置需要一個循環：

該方法計算的位置也不總是正確的，推薦使用內置的getBoundingClientRect()方法。

　　2.1 clientWidth和clientHeight類似于offsetWidth和offsetHeight屬性，不同的是它們不包含邊框大小，只包含內容和內邊距。同時，如果瀏覽器在內邊距和邊框之間添加了滾動條，clientWidth和clientHeight的返回值也不包含滾動條。注意，對于類型,和這些內聯元素，clientWidth和clientHeight總是返回0。

　　2.2 clientLeft和clientTop返回元素的內邊距的外邊緣和它的邊框的外邊緣之間的水平距離和垂直距離，通常這些值就等于左邊和上邊的邊框寬度。但是如果元素有滾動條，并且瀏覽器將這些滾動條旋轉在左側或頂部，他們就還包含了滾動條的寬度。對于內聯元素，它們總是為0。通常clientLeft和clientTop用處不大。

　　3.1 scrollWidth和scollHeight是元素的內容區域加上它的內邊距再加上任何溢出內容的尺寸。當內容正好和內容區域匹配而沒有溢出時，這些屬性與clientWidth和clientHeight是相等的。但當溢出時，它們就包含溢出的內容，返回值比clientWidth和clientHeight要大。

　　3.2 scrollLeft和scrollTop指定元素的滾動條的位置。注意，scrollLeft和scrollTop是可寫的，通過設置它們來讓元素中的內容滾動(HTML元素并沒有類似Window對象的scrollTo()方法)。

obj.offset[WidthHeightTopLeft] 　取控件相對于父控的位置
event.offset[XY] 取鼠標相在觸發事件的控件中的坐標
event.screen[XY] 鼠標相對于屏幕坐標
event.client[XY] 鼠標相對于網頁坐標在在
obj.scroll[WidthHeightTopLeft]　獲取對象滾動的大小
obj.client[WidthHeightTopLeft]　獲取對象可見區域的大小

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

javascript中offset、client、scroll的屬性總結_javascript技巧

javascript中offset、client、scroll的屬性總結_javascript技巧:HTML元素有幾個offset、client、scroll開頭的屬性，總是讓人摸不著頭腦。在書中看到記下來，分享給需要的小伙伴。主要是以下幾個屬性： 第一組：offsetWidth,offsetHeight,offsetLeft,offsetTop,offsetParent 第二組：clientWi

推薦度：

點擊下載本文 文檔為doc格式

標簽： js 屬性 總結

• 熱門焦點