共计 3530 个字符，预计需要花费 9 分钟才能阅读完成。
一、window 对象
1.1 窗口左上角在屏幕上的 x 坐标 和 y 坐标（只读）
screenLeft||screenX
screenTop||screenY
兼容性
IE、Safari 和 Opera 支持 ScreenLeft/ScreenTop
Firefox、Safari 支持 ScreenX/ScreenY
Chrome 都支持
1.2 文档区宽高（只读）
文档区宽高（不含工具栏、控制台等，只是网页显示区域的宽高）
innerWidth||document.documentElement.clientWidth||document.body.clientWidth
innerHeight||document.documentElement.clientHeight||document.body.clientHeightinnerWidth 是非 IE 写法，document 是 IE 写法
1.3 整个浏览器窗口的宽高（只读）outerWidth、outerHeight
不支持 IE，IE 没有获取整个浏览器窗口的宽高的方法
1.4 pageXOffset、pageYOffset
设置或读取当前页面相对于窗口显示区左上角的 X/Y 位置
二、event 对象（事件对象）
在触发 DOM 上的某个事件时，会产生一个事件对象 event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持 event 对象，但支持的方式不同。
普通浏览器支持 event
ie 678 支持 window.event
所以如果需要兼容旧版浏览器的话，可以采取兼容性的写法
var event = event || window.event;2.1 event.screenX event.screenY
返回事件发生时，鼠标指针相对于显示器屏幕的左上角水平/垂直坐标
<body>
<div id="box"></div>
<script>
var box = document.getElementById('box');
box.addEventListener('click',function(event){
var screenX = event.screenX;
var screenY = event.screenY;
alert('指针相对于屏幕显示器左上角的 X 坐标是：'+screenX+'，指针相对于屏幕显示器左上角的 Y 坐标是：'+screenY);
})
</script>2.2 event.clientX event.clientY
返回事件发生时，鼠标指针相对于浏览器窗口可视区域的水平/垂直窗口坐标。
可视区域不包括工具栏和滚动条，IE 事件和 w3c 标准事件都定义了这 2 个属性
<div id="box"></div>
<script>
var box = document.getElementById('box');
box.addEventListener('click',function(event){
var clientX = event.clientX;
var clientY = event.clientY;
alert('指针相对于文档可视区的 X 坐标是：'+clientX+'，指针相对于文档可视区的 Y 坐标是：'+clientY);
})
</script>2.3 event.offsetX event.offsetY（仅 IE）
返回鼠标指针的位置，相对于事件源元素的水平（垂直坐标）
<body>
<div id="box"></div>
<script>
var box = document.getElementById('box');
box.addEventListener('click',function(event){
var offsetX = event.offsetX;
var offsetY = event.offsetY;
alert('指针相对于 box 的 X 坐标是：'+offsetX+'，指针相对于 box 的 Y 坐标是：'+offsetY);
})
</script>2.4 event.pageX event.pageY（不支持 IE）
返回鼠标指针的位置，类似于 event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。
三、document 对象
3.1 文档区宽高：clientWidth/clientHeight
示例图见 1.2 小节
document.documentElement.clientWidth || document.body.clientWidth
document.documentElement.clientHeight || document.body.clientHeight3.2 html(body) 的总宽高：offsetWidth/offsetHeight
document.documentElement.offsetWidth || document.body.offsetWidth
document.documentElement.offsetHeight || document.body.offsetHeight获取某个元素的总宽高，也可以使用 offsetWidth/offsetHeight 方法。
3.3 滚动高度（滚动条滚过的长度）
document.documentElement.scrollTop || document.body.scrollTop四、DOM 对象（元素）的 offset 家族
4.1 计算元素宽高：offsetWidth、offsetHeight
offsetWidth 计算方法如下：
offsetWidth = width + border + padding
4.2 获取位置 offsetLeft 和 offsetTop
返回距离上级盒子（最近的带有定位）左边的位置。
如果父级都没有定位则以 body 为准。
offsetLeft 从父级的 padding 开始算 父亲的 border 不算，即：就是子盒子到定位的父盒子边框到边框的距离。
4.3 获取带有定位的父级元素 offsetParent
offsetParent 返回该对象的父级（带有定位）
4.4 offsetParent 和 parentNode 的区别：
如果当前元素的父级元素没有进行 CSS 定位（position 为 absolute 或 relative），offsetParent 为 body。
如果当前元素的父级元素中有 CSS 定位（position 为 absolute 或 relative），offsetParent 取最近的那个父级元素。
4.5 offsetTop 和 style.top 的区别
- 最大区别在于 offsetLeft 可以返回没有定位盒子的距离左侧的位置。而 style.top 不可以 只有定位的盒子 才有 left top right
- offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
- offsetTop 只读，而 style.top 可读写。
- 如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。
- 最重要的区别 style.left 只能得到 行内样式 offsetLeft 随便
4.6 附：获取行内样式的宽高 ele.style.width/height
div.style.width 只能获取到行内样式，无法获取 css 样式表里面的样式。
五、Window 对象方法
5.1 moveBy()
语法：window.moveBy(x,y)
相对窗口当前的坐标，把它移动到指定的像素
x：要把窗口右移的像素
y: 要把窗口下移的像素
5.2 moveTo()
语法：window.moveTo(x,y)
把窗口的左上角移动到一个指定的坐标
x：窗口新位置的 x 坐标
y: 窗口新位置的 y 坐标
提示：出于安全方面的原因，浏览器限制此方法使其不能把窗口移出屏幕。
5.3 resizeBy()
语法：resizeBy(width, height)
根据指定的像素来调整窗口的大小
width：必需，要使窗口宽度增加的像素数。可以是正、负数值
height：可选，要使窗口高度增加的像素数。可以是正、负数值
5.4 resizeTo()
语法：resizeTo(width, height)
把窗口的大小调整为指定的宽度和高度
width：必需，想要调整到的窗口的宽度。以像素计
height：可选，想要调整到的窗口的高度。以像素计
5.5 scrollBy()
语法：scrollBy(xnum, ynum)
把内容滚动指定的像素数
xnum：必需，把文档向右滚动的像素数
ynum：必需，把文档向下滚动的像素数
5.6 scrollTo()
语法：scrollTo(xpos, ypos)
把内容滚动到指定的坐标
xpos：必需，要在窗口文档显示区左上角显示的文档的 x 坐标
ypos：必需，要在窗口文档显示区左上角显示的文档的 y 坐标
