与元素坐标相关属性：
1.HTML元素
html元素是网页的根元素，document.documentElement就指向这个元素。
1.1 clientWidth, clientHeight
这两个属性返回视口（viewport）的大小，单位为像素。所谓“视口”，是指用户当前能够看见的那部分网页的大小。document.documentElement.clientWidth和document.documentElement.clientHeight，基本上与window.innerWidth和window.innerHeight同义。但是前者不将滚动条计算在内（很显然，滚动条和工具栏会减小视口大小），而后者包括了滚动条的高度和宽度。
1.2 offsetWidth，offsetHeight
这两个属性返回html元素的宽度和高度，即网页的总宽度和总高度。
2.Element对象
2.1 clientHerght, clientWidth, clientLeft, clientTop
这几个属性与元素节点可见区域的坐标相关。如果一个元素是滚动的，clientWidth和clientHeight只计算它的可见部分的宽度和高度。
(1) clientHeight
clientHeight属性返回元素节点的可见高度，包括padding、但不包括水平滚动条、边框和margin的高度，单位为像素。
(2) clientWidth
clientWidth属性等于网页元素的可见宽度，即包括padding、但不包括垂直滚动条（如果有的话）、边框和margin的宽度，单位为像素。
(3) clientTop
clientTop属性表示一个元素顶部边框的宽度，不包括顶部的margin和padding。单位为像素。
(4) clientLeft
clientLeft属性表示一个元素左边边框的宽度，不包括左侧的margin和padding。单位为像素。
2.2 scrollHeight, scrollWidth, scrollLeft, scrollTop
这几个属性与元素节点占据的总区域的坐标相关。
(1) scrollHeight
scrollHeight属性返回指定元素的总高度，包括由于溢出而无法展示在网页的不可见部分。如果一个元素是可以滚动的，则scrollHeight 包括整个元素的高度，不管是否存在垂直滚动条。scrollHeight属性包括padding，但不包括border和margin。该属性为只读属 性。
(2) scrollWidth
scrollWidth属性返回元素的总宽度，包括由于溢出容器而无法显示在网页上的那部分宽度，不管是否存在水平滚动条。该属性是只读属性。
(3) scrollTop
scrollTop属性设置或返回垂直滚动条向下滚动的像素数量。它的值等于元素的顶部与其可见的最高位置之间的距离。对于那些没有滚动条或不需要滚动的元素，该属性等于0。该属性是可读写属性，设置该属性的值，会导致浏览器将指定元素自动滚动到相应位置。
(4) scrollLeft
scrollLeft属性设置或返回水平滚动条向右侧滚动的像素数量。它的值等于元素的最左边与其可见的最左侧之间的距离。对于那些没有滚动条或不需要滚动的元素，该属性等于0。该属性是可读写属性，设置该属性的值，会导致浏览器将指定元素自动滚动到相应的位置。
3.window对象的大小和位置
3.1 window.screenX, window.screenY
window.screenX和window.screenY属性，返回浏览器窗口左上角相对于当前屏幕左上角（(0, 0)）的水平距离和垂直距离，单位为像素。
3.2 window.innerHeight, window.innerWidth
window.innerHeight和window.innerWidth属性，返回网页在当前窗口中可见部分的高度和宽度，即“视口”（viewport），单位为像素。
当用户放大网页的时候（比如将网页从100%的大小放大为200%），这两个属性会变小。因为这时网页的像素大小不变，只是每个像素占据的屏幕空间变大了，因为可见部分（视口）就变小了。
这两个属性值包括滚动条的高度和宽度。
3.3 window.outerHeight, winodw.outerWidth
window.outerHeight和window.outerWidth属性返回浏览器窗口的高度和宽度，包括浏览器菜单和边框，单位为像素。
3.4 window.pageXOffset, window.pageYOffset
window.pageXOffset属性返回页面的水平滚动距离，window.pageYOffset属性返回页面的垂直滚动距离，单位都为像素。