【JavaScript】尺寸和位置

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，因为页面还存在被卷起来的部分的宽度和高度。