对象的宽度、top位置，x坐标属性
DOM对象
| DOM对象属性 | 对应css | 说明 | 读/写 | |
| width | obj.clientWidth=20 |
1. 内联样式 <p style="width:20px"></p> 2. 内部/外部CSS <style> p{ width: 20px; border: 0; padding: 0; } </style> <p></p> |
在页面上返回内容的可视宽度 (内容+padding) 不包括边框，边距或滚动条 |
只读 |
| obj.scrollWidth=20 |
1. 内联样式 2. 内部/外部CSS |
子元素整个盒子宽度以及当前元素左侧padding值 (内容+padding) |
只读 | |
| obj.offsetWidth=20 |
1. 内联样式 2. 内部/外部CSS |
返回元素的宽度， 包括边框和填充 (内容+padding+border) |
只读 | |
| obj.style.width="20px" | <p style="width:20px"></p> |
在内联中定义才能读到值，否则为空 |
可写 | |
| obj.width | 这个属性并没有 | |||
| height | 与width一样 | |||
| top | obj.offsetTop=20 | 元素border外侧相对父元素border内侧垂直方向的偏移量 | 只读 | |
| obj.scrollTop=20 |
overflow:scroll时会出现滚动条 当前内容的顶部相对原始内容顶部的距离
|
可写 | ||
| obj.style.top="20px" |
在内联中定义才能读到值，否则为空 |
可写 | ||
| left | 与top一样 |
Window窗口
| 属性 | 说明 | |
| width | window.innerWidth | 窗口的文档显示区的宽度 |
| window.outerWidth | 窗口的外部宽度，包含工具条与滚动条 | |
| height | 与width相似 | |
| left | window.screenLeft | 返回相对于屏幕窗口的x坐标 |
| top | 与left相似 |
event事件
纵坐标与横坐标类似，这里只列出横坐标
| 属性 | 说明 |
| event.screenX |
鼠标指针相对于电脑屏幕的水平坐标 |
| event.clientX |
鼠标指针向对于浏览器页面（或可见区域）的水平坐标 |
| event.pageX |
鼠标指针相对于整个文档的水平坐标 |
