資訊專欄INFORMATION COLUMN
摘要：元素和事件對象中的各種寬高和位置標簽經常被一堆的弄混，統一整理一下。元素中的寬高和位置屬性表示元素的內部寬度，以像素計。表示元素實際占用的高度，包括其邊框，內邊距和元素內容。
HTML元素和事件對象中的各種寬高和位置
標簽： js
[TOC]
經常被一堆的xxxWidth,xxxLeft弄混，統一整理一下。
1. HTML元素中的寬高和位置屬性clientWidth 表示元素的內部寬度，以像素計。該屬性包括內邊距，但不包括垂直滾動條、邊框和外邊距。
clientHeight 表示元素內部的高度(單位像素)，包含內邊距和元素內容，但不包括水平滾動條、邊框和外邊距。
clientLeft 表示一個元素的左邊框的寬度，以像素表示。如果元素的文本方向是從右向左（RTL, right-to-left），并且由于內容溢出導致左邊出現了一個垂直滾動條，則該屬性包括滾動條的寬度。clientLeft 不包括左外邊距和左內邊距。clientLeft 是只讀的。
clientTop 一個元素頂部邊框的寬度（以像素表示）。不包括頂部外邊距或內邊距。clientTop 是只讀的。
offsetWidth 表示元素實際占用的寬度，包括其邊框，內邊距和元素內容。
offsetHeight 表示元素實際占用的高度，包括其邊框，內邊距和元素內容。
offsetLeft 表示元素相對于其offsetParent。 屬性指定的父元素左上角的水平偏移量，從元素的邊框開始計算。body元素的offsetParent為null。
offsetTop 表示元素相對于其offsetParent 屬性指定的父元素左上角的垂直偏移量，從元素的邊框開始計算。
scrollWidth 表示元素的內容區域寬度，包括overflow樣式屬性導致的視圖中不可見內容。若元素的寬度大于其內容的區域（例如，元素存在滾動條時）, scrollWidth的值要大于clientWidth。scrollWidth是只讀的。
scrollHeight 表示元素內容高度，包括overflow樣式屬性導致的視圖中不可見內容。沒有垂直滾動條的情況下，scrollHeight值與元素視圖填充所有內容所需要的最小值clientHeight相同。包括元素的內邊距，但不包括元素的邊框和外邊距。scrollHeight是只讀的。
scrollTop 此屬性可以設置或者獲取一個元素的顯示區域距離他容器頂部的像素距離。
scrollLeft 此屬性可以讀取或設置元素顯示區域距離其容器最左邊的像素距離。
2. getBoundingRect()方法返回一個對象，包括元素實際占用位置(從邊框開始計算)與瀏覽器內容窗口左上角的位移量，從元素的邊框開始計算
left 元素的最左側與瀏覽器內容窗口左上角的位移量
right 元素的最右側與瀏覽器內容窗口左上角的位移量
top 元素的最上側與瀏覽器內容窗口左上角的位移量
bottm 元素的最下側與瀏覽器內容窗口左上角的位移量
3.事件對象clientX 設置或獲取鼠標指針位置相對于瀏覽器窗口區域的x坐標，瀏覽器窗口區域指瀏覽器顯示的窗口，不包括菜單欄，工具欄等區域。
clientY 設置或獲取鼠標指針位置相對于瀏覽器窗口區域的y坐標
pageX 設置或獲取鼠標指針位置相對于整個瀏覽器的x坐標。IE無此屬性
pageY 設置或獲取鼠標指針位置相對于整個瀏覽器的y坐標。IE無此屬性
screenX 設置或獲取鼠標指針位置相對于整個屏幕的x坐標
screenY 設置或獲取鼠標指針位置相對于整個屏幕的y坐標
offsetX 設置或獲取鼠標指針位置相對于觸發事件的對象的 x 坐標。 從元素的內邊距開始計算
offsetY 設置或獲取鼠標指針位置相對于觸發事件的對象的 y 坐標。從元素的內邊距開始計算。
layerX 在firefox和safari下，表示鼠標相比較于當前坐標系的位置,即如果觸發元素沒有設置絕對定位或相對定位,以頁面為參考點,如果有,將改變參考坐標系,從觸發元素盒子模型的實際占用區域(包含邊框)的左上角為參考點。在chrome與opera中，以觸發事件元素的中心作為坐標系原點。IE不支持此屬性
layerY 表示鼠標點擊位置在坐標系中的y值
x chrome,safari,opera瀏覽器中與clientX相等，IE中與offsetX相等，firefox無此屬性
y chrome,safari,opera瀏覽器中與clientY相等，IE中與offsetY相等，firefox無此屬性
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91037.html
摘要：摘自阮一峰教程位置大小屬性只讀屬性返回瀏覽器窗口左上角相對于當前屏幕左上角的水平距離和垂直距離單位像素。摘自阮一峰教程相關方法返回一個對象，提供當前元素的大小位置等信息。摘自阮一峰教程四鼠標事件接口通過添加的事件所產生的事件對象也是實例。 一 前言 在前端開發中總會遇到各種各樣需要使用或計算坐標和距離的情況，但是這些屬性和方法眾多，全部熟練地記下來并非是一件易事，大多只能現查，耗費不少...
摘要：摘自阮一峰教程位置大小屬性只讀屬性返回瀏覽器窗口左上角相對于當前屏幕左上角的水平距離和垂直距離單位像素。摘自阮一峰教程相關方法返回一個對象，提供當前元素的大小位置等信息。摘自阮一峰教程四鼠標事件接口通過添加的事件所產生的事件對象也是實例。一 前言 在前端開發中總會遇到各種各樣需要使用或計算坐標和距離的情況，但是這些屬性和方法眾多，全部熟練地記下來并非是一件易事，大多只能現查，耗費不少時間精力...
摘要：是一個只讀的屬性，元素的內容高度寬度，包括由于屬性而不可見的部分。一個只讀屬性，返回一個指向最近的包含該元素的定位元素。很有用，因為和都是相對于其內邊距邊界的。它包括內部的寬度和高度和，但不包括滾動條和。 1.scrollHeight/Width scrollHeight/Width是一個只讀的屬性，元素的內容高度/寬度，包括由于overflow屬性而不可見的部分。不能直接從css中得...
摘要：在中，存在著多的關于高度和寬度的屬性，比如等等這么多，傻傻分不清也正常啊。第二問題對象的屬性引用的是對象，表示該窗口中當前顯示文檔的。如果出現滾動條，滾動條會遮蓋元素的寬高，那么該屬性就是其本來寬高減去滾動條的寬高。 在js中，存在著N多的關于高度和寬度的屬性，比如：clientHeight、offsetHeight、scrollHeight、availHeight、scrollLef...
摘要：和這一對屬性是用來讀取元素的的寬度和高度的。第二部分對象在中，對于元素的運動的操作通常都會涉及到對象，而對象也存在很多位置屬性，且由于瀏覽器兼容性問題會導致這些屬性間相互混淆，這里一一講解。文章轉自中的各種寬高以及位置總結 在javascript中操作dom節點讓其運動的時候，常常會涉及到各種寬高以及位置坐標等概念，如果不能很好地理解這些屬性所代表的意義，就不能理解js的運動原理，同時...
閱讀 2238·2021-09-23 11:52
閱讀 1905·2021-09-02 15:41
閱讀 3026·2019-08-30 10:47
閱讀 1989·2019-08-29 17:14
閱讀 2345·2019-08-29 16:16
閱讀 3195·2019-08-28 18:29
閱讀 3426·2019-08-26 13:30
閱讀 2615·2019-08-26 10:49
