Javascript中常用寬高和坐標屬性

wuyangnju 發布于2019-08-20 10:37 / 1514人閱讀

摘要：是一個只讀的屬性，元素的內容高度寬度，包括由于屬性而不可見的部分。一個只讀屬性，返回一個指向最近的包含該元素的定位元素。很有用，因為和都是相對于其內邊距邊界的。它包括內部的寬度和高度和，但不包括滾動條和。

1.scrollHeight/Width

scrollHeight/Width是一個只讀的屬性，元素的內容高度/寬度，包括由于overflow屬性而不可見的部分。不能直接從css中得到。scrollHeight/Width的值除了內容高度/寬度，也包括padding值。
scrollWidth類似。

2.scrollTop/Left

以scrollLeft為例：
scrollLeft屬性能夠得到或者設置元素滾動到左邊的像素值。注意(rtl和ltr會不同)

假如element不能夠scroll的時候，比如沒有設置overflow屬性。scrollLeft會被重置為0，不管你設置什么值，都不會有什么效果。（這也是很多scrollLeft失效的原因）

設置的值小于0，重置為0

設置的值超過內容允許滾動的最大值，重置為最大值。

注意事項：scrollLeft屬性是應用在父元素上面，而不是子元素。
其它scrollTop與scrollLeft類似。

3. offsetHeight/Width

offsetHeight/Width是一個只讀屬性，返回一個元素的結構寬度，包括元素的border和padding、滾動條(如果存在的話)和css設置的高度/寬度。

4.offsetTop/Left

以offsetLeft為例, 返回當前元素左上角相對于HTMLElement.offsetParent節點的左邊界偏移的像素值。

HTMLElement.offsetParent:一個只讀屬性，返回一個指向最近的包含該元素的定位元素。如果沒有定位的元素，則 offsetParent 為最近的 table 元素或根元素（標準模式下為 html；quirks 模式下為 body）。當元素的 style.display 設置為 "none" 時，offsetParent 返回 null。offsetParent 很有用，因為 offsetTop 和 offsetLeft 都是相對于其內邊距邊界的。

例如：


  Short span. 
  Long span that wraps within this div.

offsetTop 類似的道理。

5.clientWidth/Height

clientWidth/Height是一個只讀屬性，對于沒有css或者內聯元素，其值為0。它包括內部的寬度和高度和padding，但不包括滾動條、border和margin。

6.clientTop/Left

clientTop/Left指的是一個元素頂部/左邊框的寬度。

7. 區別

摘自stackoverflow的一幅圖，可以很好地看到之間的區別：

8.clientX/Y

clientX/Y屬性返回當事件被觸發時鼠標指針向對于瀏覽器頁面（或客戶區）的水平/豎直坐標，不包括滾動條滾動才能顯示的區域。定位的依據為瀏覽器窗口內容區域的左上角。

9.offsetX/Y(experimental technology)

offsetX/Y 設置或者是得到鼠標相對于目標事件的父元素的內邊界在X/Y坐標上的位置

10.screenX/Y

screenX/Y 相對于物理屏幕/監視器的左上角，只有你增加或減少顯示器的數量或分辨率，參考點才會移動。

11.pageX/Y

pageX/Y 相對于整個渲染頁面的左上角（包括通過滾動隱藏的部分),簡單來說就是元素。

參考資料

1.Element.scrollHeight
2.Element.scrollLeft
3.HTMLElement.offsetWidth
4.HTMLElement.offsetParent
5.HTMLElement.offsetLeft
6.Element.clientHeight
7.Element.clientTop
8.Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively

云服務器 GPU云服務器 javascript屬性 javascript常用代碼 javascript常用事件 javascript常用框架

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/80234.html

HTML元素和事件對象中的各種寬高和位置

摘要：元素和事件對象中的各種寬高和位置標簽經常被一堆的弄混，統一整理一下。元素中的寬高和位置屬性表示元素的內部寬度，以像素計。表示元素實際占用的高度，包括其邊框，內邊距和元素內容。 HTML元素和事件對象中的各種寬高和位置標簽： js [TOC] 經常被一堆的xxxWidth,xxxLeft弄混，統一整理一下。 1. HTML元素中的寬高和位置屬性 clientWidth 表示元素的內...

gggggggbong 2019-08-22 10:40 評論0 收藏0
JavaScript 中那些關于坐標和距離的屬性與方法

摘要：摘自阮一峰教程位置大小屬性只讀屬性返回瀏覽器窗口左上角相對于當前屏幕左上角的水平距離和垂直距離單位像素。摘自阮一峰教程相關方法返回一個對象，提供當前元素的大小位置等信息。摘自阮一峰教程四鼠標事件接口通過添加的事件所產生的事件對象也是實例。一前言在前端開發中總會遇到各種各樣需要使用或計算坐標和距離的情況，但是這些屬性和方法眾多，全部熟練地記下來并非是一件易事，大多只能現查，耗費不少...

jsummer 2019-08-26 13:57 評論0 收藏0
JavaScript 中那些關于坐標和距離的屬性與方法

摘要：摘自阮一峰教程位置大小屬性只讀屬性返回瀏覽器窗口左上角相對于當前屏幕左上角的水平距離和垂直距離單位像素。摘自阮一峰教程相關方法返回一個對象，提供當前元素的大小位置等信息。摘自阮一峰教程四鼠標事件接口通過添加的事件所產生的事件對象也是實例。一前言在前端開發中總會遇到各種各樣需要使用或計算坐標和距離的情況，但是這些屬性和方法眾多，全部熟練地記下來并非是一件易事，大多只能現查，耗費不少時間精力...

guqiu 2019-05-27 17:42 評論0 收藏0
JavaScript中的各種寬高屬性

摘要：在中，存在著多的關于高度和寬度的屬性，比如等等這么多，傻傻分不清也正常啊。第二問題對象的屬性引用的是對象，表示該窗口中當前顯示文檔的。如果出現滾動條，滾動條會遮蓋元素的寬高，那么該屬性就是其本來寬高減去滾動條的寬高。在js中，存在著N多的關于高度和寬度的屬性，比如：clientHeight、offsetHeight、scrollHeight、availHeight、scrollLef...

wangbinke 2019-08-20 12:21 評論0 收藏0
03.Android之View原理問題

摘要：這種自定義控件在原生控件提供的方法外，可以自己添加一些方法。從頂層父到子遞歸調用方法，方法又回調。目錄介紹 3.0.0.1 View的繪制需要經過哪些過程？有哪些常用回調方法？View的繪制流程的詳細流程是怎樣的？ 3.0.0.2 View繪制流程，當一個TextView的實例調用setText()方法后執行了什么？請說一下原理…… 3.0.0.3 requestLayout()、...

FrozenMap 2019-08-16 14:14 評論0 收藏0