要弄清的问题
通过搭配可以组合出很多种属性,本文就是介绍如何区分这些属性。
前缀
- offset
- client
- scroll
- *screen
- *page
后缀
- Width, Height
- Left, Top
- X, Y
offset 相关
offsetWidth、offsetHeight
只读属性,代表了元素的布局宽度和布局高度,包含了以下:
- width/height
- border(边框)
- padding(内边距)
- scrollbar(如果存在滚动条,并且被渲染)
offsetParent
只读属性,指向最近的包含该元素的定位元素。
定位元素是指含有 position: absolute/relative
。
- 若有定位元素则返回该元素;
- 若没有定位元素,返回最近的
table
,table cell
或根元素body
; - 当元素的
style.display
设置为none
时,offsetParent 返回null
。
offsetLeft、offsetTop
只读属性,返回当前元素左上角相对于 HTMLElement.offsetParent
节点的上、左边界偏移的像素值,包含以下:
offsetParent
的padding
- 中间元素的
width
/height
- 自身的
margin
client 相关
clientWidth、clientHeight
元素的内部宽度、高度。该属性包含以下:
- width/height
- padding(内边距)
不包括垂直滚动条(如果有)、边框和外边距。
clientLeft、clientTop
只读属性,一个元素顶部边框的宽度、高度,包含:
- border(边框)
scroll 相关
scrollWidth、scrollHeight
只读属性,若元素的宽度、高度大于其内容的区域(例如,元素存在滚动条时), scrollWidth
/scrollHeight
的值要大于 clientWidth
/clientHeight
,包含以下:
- 溢出部分
- clientWidth/clientHeight
scrollLeft、scrollTop
可读写,一个元素的 scrollLeft
、scrollTop
是可以去计算出这个元素最高高度、宽度距离它容器顶部、右边的可见高度。
- 元素的滚动条的位置;
- 当没有产生垂直方向的滚动条,那它的
scrollTop
的值默认为 0; - 通过设置它们来让元素中的内容滚动。
screen, page, X/Y 相关
带有 X/Y
后缀的属性都是 MouseEvent
的独有属性,用于鼠标事件。
offsetX、offsetY
设置或获取,鼠标指针位置相对于触发事件的对象的 X/Y 坐标。
clientX、clientY
设置或获取,鼠标指针位置相对于当前窗口的 X/Y 坐标,其中客户区域不包括窗口自身的控件和滚动条。
screenX、screenY
设置或获取,鼠标指针位置相对于用户屏幕的 X/Y 坐标。
pageX、pageY
获取,鼠标指针位置相对于整个文档的 X/Y 坐标。仅支持到 IE9。
区别:style.top 和 offsetTop
- offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px 。
- offsetTop 只读,而 style.top 可读写。
- 如果没有给 HTML 元素指定过 top 样式,则 style.top 返回的是空字符串。
offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。
表格快速查询
简化说明:
- width 包含 height
- left 包含 top
属性 | offsetWidth | clientWidth | scrollWidth | offsetLeft | clientLeft | scrollLeft |
---|---|---|---|---|---|---|
width | √ | √ | √ | √ | ||
border | √ | √ | ||||
padding | √ | √ | √ | |||
scrollbar | √ | |||||
margin | √ | |||||
溢出部分 | √ | |||||
offsetParent 的 padding | √ | |||||
是否读写 | 只读 | 只读 | 只读 | 只读 | 只读 | 可读写 |