DOM對象相關的尺寸和位置屬性

用于獲取和修改元素在頁面中的尺寸和位置。

只讀屬性：

1. clientWidth和clientHeight：獲取元素可視區域的寬度和高度（padding + content），不包括邊框和滾動條。

2. offsetWidth和offsetHeight獲取元素的完整尺寸，包括可視區域、內邊距和邊框（padding + content + border）。

3. clientTop和clientLeft：獲取元素上邊框和左邊框的寬度（border）。

4. offsetLeft和offsetTop：獲取元素相對于其有定位（position）的父元素的左偏移和上偏移（top、left）。

5. scrollHeight和scrollWidth：獲取元素的滾動內容的高度和寬度，包括溢出部分。

可讀可寫屬性：

1. scrollTop和scrollLeft：獲取或設置元素的垂直和水平滾動條位置（滾動元素被卷起的寬度和高度）。可以獲取當前滾動的位置，也可以通過修改其值來實現滾動位置的變化。

2. domObj.style.xxx屬性：獲取或設置元素的樣式屬性，例如domObj.style.width、domObj.style.color等。可以通過修改這些屬性的值來改變元素的外觀。

event 對象相關位置和尺寸屬性

事件觸發的時候自動傳遞到事件處理函數里。

1. clientX 和 clientY：事件發生時，鼠標指針相對于瀏覽器窗口視口（viewport）的水平和垂直坐標。clientX 是相對于瀏覽器窗口左上角的水平坐標，clientY 是相對于瀏覽器窗口左上角的垂直坐標。

2. screenX 和 screenY：事件發生時，鼠標指針相對于用戶的顯示屏幕的水平和垂直坐標。screenX 是相對于顯示屏幕左上角的水平坐標，screenY 是相對于顯示屏幕左上角的垂直坐標。這些坐標不隨頁面滾動而改變。

3. offsetX 和 offsetY：事件發生時，鼠標指針相對于事件目標元素（即該DOM元素）的水平和垂直坐標。X 是相對于事件目標元素內邊界左上角的水平坐標，offsetY 是相對于事件目標元素內邊界左上角的垂直坐標。

4. pageX 和 pageY：事件發生時，鼠標指針相對于整個文檔頁面的水平和垂直坐標。pageX 是相對于文檔頁面左上角的水平坐標，pageY 是相對于文檔頁面左上角的垂直坐標。這些坐標會受到頁面滾動的影響。當頁面沒有滾動條時，和clientX 和 clientY等價。但是當瀏覽器出現滾動條的時候，pageX通常會大于clientX，因為頁面還存在被卷起來的部分的寬度和高度。