坐标（鼠标/触摸）

1. <div style="text-align: left;">event.screenX                          鼠标/触摸，相对于显示屏的X坐标</div>event.screenY                          鼠标/触摸，相对于显示屏的Y坐标
   
2. 
   
3. event.clientX                          鼠标/触摸，相对于浏览器视口的X坐标
   
4. event.clientY                          鼠标/触摸，相对于浏览器视口的Y坐标
   
5. 
   
6. event.pageX                            鼠标/触摸，相对于文档的X坐标(ie不支持)
   
7. event.pageY                            鼠标/触摸，相对于文档的Y坐标(ie不支持)
   
8. 
   
9. event.offsetX                          鼠标/触摸，相对于触发事件的X坐标(ie独有)
   
10. event.offsetY                          鼠标/触摸，相对于触发事件的Y坐标(ie独有)

复制代码

滚动（窗口/页面）

1. window.pageXOffset                     X轴滚动条，能向右滚动的距离（只读属性/IE需要9以上/PC和移动端都支持）
   
2. window.pageYOffset                     Y轴滚动条，能向下滚动的距离（只读属性/IE需要9以上/PC和移动端都支持）
   
3. 
   
4. document.body.scrollLeft               X轴滚动条，能向右滚动的距离（仅移动端支持）
   
5. document.body.scrollTop                Y轴滚动条，能向下滚动的距离（仅移动端支持）
   
6. 
   
7. document.documentElement.scrollTop     X轴滚动条，能向右滚动的距离（仅PC端支持）
   
8. document.documentElement.scrollLeft    Y轴滚动条，能向下滚动的距离（仅PC端支持）
   
9. 
   
10. document.scrollingElement.scrollTop    X轴滚动条，能向右滚动的距离（ie不支持）
    
11. document.scrollingElement.scrollLeft   Y轴滚动条，能向下滚动的距离（ie不支持）

复制代码

宽高（屏幕/游览器视口/页面）

1. screen.width                           屏幕宽度
   
2. screen.height                          屏幕高度
   
3. screen.availWidth                      屏幕可用宽度
   
4. screen.availWidth                      屏幕可用高度
   
5. 
   
6. window.outerWidth                      游览器宽度
   
7. window.outerHeight                     游览器高度
   
8. window.innerWidth                      游览器视口宽度
   
9. window.innerHeight                     游览器视口高度
   
10. 
    
11. document.body.offsetWidth              页面宽度
    
12. document.body.offsetHeight             页面高度
    
13. document.body.clientWidth              页面可显示宽度
    
14. document.body.clientHeight             页面可显示高度

复制代码

宽高&距离（DOM）

1. offsetWidth                            元素宽度（可视内容区 + 滚动条 + 内边距 + 边框）
   
2. offsetHeight                           元素高度（可视内容区 + 滚动条 + 内边距 + 边框）
   
3. offsetLeft                             与相邻父级的左距离
   
4. offsetTop                              与相邻父级的上距离
   
5. 
   
6. clientWidth                            元素宽度（可视内容区 + 内边距）
   
7. clientHeight                           元素高度（可视内容区 + 内边距）
   
8. clientLeft                             内边距边缘与边框边缘的距离（左边框）
   
9. clientTop                              内边距边缘与边框边缘的距离（上边框）
   
10. 
    
11. scrollWidth                            元素宽度（可视内容区 + 滚动内容区 + 内边距）
    
12. scrollHeight                           元素高度（可视内容区 + 滚动内容区 + 内边距）
    
13. scrollLeft                             隐藏的滚动距离（待滚动距离）
    
14. scrollTop                              隐藏的滚动距离（待滚动距离）

复制代码

宽高&位置（DOM）

1. getBoundingClientRect()                返回元素的宽高与坐标集合
   
2.                                            > 宽高 = 可视内容区 + 内边距 + 边框
   
3.                                            > 坐标
   
4.                                                  left = 位移 + 外边距
   
5.                                                  right = 位移 + 完整盒子模型所占宽度
   
6.                                                  top = 同left
   
7.                                                  bottom = 同right
   
8. 
   
9. getClientRects()                       返回元素的数个矩形区域的类数组对象（集合）
   
10.                                            > 用于块级元素，则集合[n]和getBoundingClientRect返回相同
    
11.                                            > 用于内联元素，内联元素有多少行，该方法返回的对象有多少个成员
    
12.                                            > 该方法，用于判断行内元素是否换行，以及行内元素的每一行的位置偏移
    
13. 
    
14. document.getClientRects(x, y)          返回当前文档上处于指定坐标位置最顶层的元素的最里层元素
    
15.                                            > 最顶层，指z-index最大的元素
    
16.                                            > 最里层，是指最里层面的子元素
    
17.                                            > 该方法，用来检测元素是否发生重叠或是碰撞

复制代码

临近父容器

1. offsetParent

复制代码

获取与邻近父级的距离集合

1. function getElementPosition(e) {
   
2.     var x = 0, y = 0;
   
3.     while (e != null) {
   
4.         x+=e.offsetLeft;
   
5.         y+=e.offsetTop;
   
6.         e=e.offsetParent;
   
7.     }
   
8.     return { x: x, y: y };
   
9. }
   
10. 
    
11. 1.对于表格和内嵌框架布局的页面，由于不同浏览器实现这些元素的方式不同，得到的值并不精确
    
12. 2.当文档中含有滚动条的时候，该方法就不能正常工作了

复制代码

坐标（鼠标/触摸）

1. <div style="text-align: left;">event.screenX                          鼠标/触摸，相对于显示屏的X坐标</div>event.screenY                          鼠标/触摸，相对于显示屏的Y坐标
   
2. 
   
3. event.clientX                          鼠标/触摸，相对于浏览器视口的X坐标
   
4. event.clientY                          鼠标/触摸，相对于浏览器视口的Y坐标
   
5. 
   
6. event.pageX                            鼠标/触摸，相对于文档的X坐标(ie不支持)
   
7. event.pageY                            鼠标/触摸，相对于文档的Y坐标(ie不支持)
   
8. 
   
9. event.offsetX                          鼠标/触摸，相对于触发事件的X坐标(ie独有)
   
10. event.offsetY                          鼠标/触摸，相对于触发事件的Y坐标(ie独有)

复制代码

滚动（窗口/页面）

1. window.pageXOffset                     X轴滚动条，能向右滚动的距离（只读属性/IE需要9以上/PC和移动端都支持）
   
2. window.pageYOffset                     Y轴滚动条，能向下滚动的距离（只读属性/IE需要9以上/PC和移动端都支持）
   
3. 
   
4. document.body.scrollLeft               X轴滚动条，能向右滚动的距离（仅移动端支持）
   
5. document.body.scrollTop                Y轴滚动条，能向下滚动的距离（仅移动端支持）
   
6. 
   
7. document.documentElement.scrollTop     X轴滚动条，能向右滚动的距离（仅PC端支持）
   
8. document.documentElement.scrollLeft    Y轴滚动条，能向下滚动的距离（仅PC端支持）
   
9. 
   
10. document.scrollingElement.scrollTop    X轴滚动条，能向右滚动的距离（ie不支持）
    
11. document.scrollingElement.scrollLeft   Y轴滚动条，能向下滚动的距离（ie不支持）

复制代码

宽高（屏幕/游览器视口/页面）

1. screen.width                           屏幕宽度
   
2. screen.height                          屏幕高度
   
3. screen.availWidth                      屏幕可用宽度
   
4. screen.availWidth                      屏幕可用高度
   
5. 
   
6. window.outerWidth                      游览器宽度
   
7. window.outerHeight                     游览器高度
   
8. window.innerWidth                      游览器视口宽度
   
9. window.innerHeight                     游览器视口高度
   
10. 
    
11. document.body.offsetWidth              页面宽度
    
12. document.body.offsetHeight             页面高度
    
13. document.body.clientWidth              页面可显示宽度
    
14. document.body.clientHeight             页面可显示高度

复制代码

宽高&距离（DOM）

1. offsetWidth                            元素宽度（可视内容区 + 滚动条 + 内边距 + 边框）
   
2. offsetHeight                           元素高度（可视内容区 + 滚动条 + 内边距 + 边框）
   
3. offsetLeft                             与相邻父级的左距离
   
4. offsetTop                              与相邻父级的上距离
   
5. 
   
6. clientWidth                            元素宽度（可视内容区 + 内边距）
   
7. clientHeight                           元素高度（可视内容区 + 内边距）
   
8. clientLeft                             内边距边缘与边框边缘的距离（左边框）
   
9. clientTop                              内边距边缘与边框边缘的距离（上边框）
   
10. 
    
11. scrollWidth                            元素宽度（可视内容区 + 滚动内容区 + 内边距）
    
12. scrollHeight                           元素高度（可视内容区 + 滚动内容区 + 内边距）
    
13. scrollLeft                             隐藏的滚动距离（待滚动距离）
    
14. scrollTop                              隐藏的滚动距离（待滚动距离）

复制代码

宽高&位置（DOM）

1. getBoundingClientRect()                返回元素的宽高与坐标集合
   
2.                                            > 宽高 = 可视内容区 + 内边距 + 边框
   
3.                                            > 坐标
   
4.                                                  left = 位移 + 外边距
   
5.                                                  right = 位移 + 完整盒子模型所占宽度
   
6.                                                  top = 同left
   
7.                                                  bottom = 同right
   
8. 
   
9. getClientRects()                       返回元素的数个矩形区域的类数组对象（集合）
   
10.                                            > 用于块级元素，则集合[n]和getBoundingClientRect返回相同
    
11.                                            > 用于内联元素，内联元素有多少行，该方法返回的对象有多少个成员
    
12.                                            > 该方法，用于判断行内元素是否换行，以及行内元素的每一行的位置偏移
    
13. 
    
14. document.getClientRects(x, y)          返回当前文档上处于指定坐标位置最顶层的元素的最里层元素
    
15.                                            > 最顶层，指z-index最大的元素
    
16.                                            > 最里层，是指最里层面的子元素
    
17.                                            > 该方法，用来检测元素是否发生重叠或是碰撞

复制代码

临近父容器

1. offsetParent

复制代码

获取与邻近父级的距离集合

1. function getElementPosition(e) {
   
2.     var x = 0, y = 0;
   
3.     while (e != null) {
   
4.         x+=e.offsetLeft;
   
5.         y+=e.offsetTop;
   
6.         e=e.offsetParent;
   
7.     }
   
8.     return { x: x, y: y };
   
9. }
   
10. 
    
11. 1.对于表格和内嵌框架布局的页面，由于不同浏览器实现这些元素的方式不同，得到的值并不精确
    
12. 2.当文档中含有滚动条的时候，该方法就不能正常工作了

复制代码