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

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無此屬性