screen对象
获取屏幕的高宽（分辨率）
screen.width //屏幕的宽
screen.height //屏幕的高
screen.availWidth //屏幕可用宽度 屏幕的像素高度减去系统部件高度之后的值
screen.availHeight //屏幕可用高度 屏幕的像素宽度减去系统部件宽度之后的值
window.scrollX; // 以像素为单位，返回水平轴上document已经被卷去的宽度 number类型
window.scrollY; // 以像素为单位，返回垂直方向上document被卷曲的高度 number类型
pageYOffset 属性是 scrollY 属性的别名，pageXOffset同理，为了跨浏览器兼容，一般用后者（pageYOffset、pageXOffset）。
另外旧版本（<9）对这两个属性都不支持，应该选用非标准的属性。
window对象
获得窗口位置及大小
window.screenTop //窗口顶部距屏幕顶部的距离
window.screenLeft //窗口左侧距屏幕左侧的距离
window.innerWidth //窗口中可视区域(viewpoint)的宽度
alert(window.innerWidth); //chrome 1366 ff 1366 ie 1366
window.innerHeight //窗口中可视区域(viewpoint)的高度 该值与浏览器是否显示菜单栏等因素有关
alert(window.innerHeight); //chrome 643 ff 657 ie 673
window.outerWidth //浏览器窗口本身的宽度(可视区域宽度+浏览器边框宽度)
alert(window.outerWidth); //chrome 1366 ff 1382 ie 1382
//说明chrome在最大化时浏览器窗口没有边框宽度,非最大化时有8px边框
//ff和ie上下左右有8px的边框宽度
window.outerHeight //浏览器窗口本身的高度
alert(window.outerHeight); //chrome 728 ff 744 ie 744
element对象
在介绍element对象各种高宽之前有必要解释一下盒模型
默认盒模型 box-sizing:content-box;
boxWidth = 2*margin + 2*border + 2*padding + width
boxHeight = 2*margin + 2*border + 2*padding + height
当不出现滚动条时
body{margin:0;}
#demo{
width:100px;
height:100px;
padding:10px;
border:20px;
margin:30px;
background-color:red;
}
<div id="demo">123456789 123456789</div>
clientWidth:在页面上返回内容的可视宽度（不包括边框，边距或滚动条）
clientHeight:在页面上返回内容的可视高度（不包括边框，边距或滚动条）
clientWidth = 2*padding + width - scrollbarWidth
console.log(document.getElementById('demo').clientWidth); //120 此时scrollbarWidth=0
clientHeight = 2*padding + height - scrollbarHeight
console.log(document.getElementById('demo').clientHeight); //120 此时scrollbarWidth=0
offsetWidth:返回元素的宽度包括边框和填充，但不包括边距
offsetHeight:返回元素的高度包括边框和填充，但不包括边距
offsetWidth = 2*border + 2*padding + width
console.log(document.getElementById('demo').offsetWidth) //160
offsetHeight = 2*border + 2*padding + height
console.log(document.getElementById('demo').offsetHeight) //160
offsetLeft: 获取对象相对于版面或由 offsetLeft属性指定的父坐标的计算左侧位置
offsetTop: 获取对象相对于版面或由 offsetTop属性指定的父坐标的计算顶端位置
console.log(document.getElementById('demo').offsetLeft) //30
console.log(document.getElementById('demo').offsetTop) //30
当出现滚动条时
body{
margin:0;
padding:20px;
width:1000px;
height:500px;
}
<div id="demo">123456789123456789</div>
scrollWidth: 返回元素的整个宽度（包括带滚动条的隐蔽的地方）
scrollHeight: 返回整个元素的高度（包括带滚动条的隐蔽的地方）
scrollWidth = 2*padding + width
console.log(document.body.scrollWidth) //1040
scrollHeight = 2*padding + width
console.log(document.body.scrollHeight) //540
scrollTop: 向下滑动滚动块时元素隐藏内容的高度。不设置时默认为0，其值随着滚动块滚动而变化
scrollLeft: 向右滑动滚动块时元素隐藏内容的宽度。不设置时默认为0，其值随着滚动块滚动而变化
简单兼容代码
//获取滚轮滚动的距离,适配所有的浏览器
function getScrollY(){
return window.pageYOffset || document.documentElement.scrollTop;
}
//设置垂直方向滚轮滚动的距离,适配所有的浏览器，num为滚动距离
function setScrollY(num){
document.body.scrollTop = document.documentElement.scrollTop = num;
}
event对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
event.pageX:相对整个页面的坐标，以页面的左上角为坐标原点到鼠标所在点的水平距离（IE8不支持）
event.pageY:相对整个页面的坐标，以页面的左上角为坐标原点到鼠标所在点的垂直距离（IE8不支持）
event.clientX:相对可视区域的坐标，以浏览器可视区域左上角为坐标原点到鼠标所在点的水平距离
event.clientY:相对可视区域的坐标，以浏览器可视区域左上角为坐标原点到鼠标所在点的垂直距离
event.screenX:相对电脑屏幕的坐标，以屏幕左上角为坐标原点到鼠标所在点的水平距离
event.screenY:相对电脑屏幕的坐标，以屏幕左上角为坐标原点到鼠标所在点的垂直距离
event.offsetX:相对于自身的坐标，以自身的padding左上角为坐标原点到鼠标所在点的水平距离
event.offsetY:相对于自身的坐标，以自身的padding左上角为坐标原点到鼠标所在点的水平距离
准确获取网页客户区的宽高、滚动条宽高、滚动条Left和Top的代码：
<script>
var cWidth = cHeight = sWidth = sHeight = sLeft = sTop = 0;
if (document.compatMode == “BackCompat”) {
cWidth = document.body.clientWidth;
cHeight = document.body.clientHeight;
sWidth = document.body.scrollWidth;
sHeight = document.body.scrollHeight;
sLeft = document.body.scrollLeft;
sTop = document.body.scrollTop;
}
else { //document.compatMode == “CSS1Compat”
cWidth = document.documentElement.clientWidth;
cHeight = document.documentElement.clientHeight;
sWidth = document.documentElement.scrollWidth;
sHeight = document.documentElement.scrollHeight;
sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;
sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
}
</script>
摘至：[http://www.cnblogs.com/jesse131/]
摘至：[https://www.cnblogs.com/zxjwlh/p/6284330.html]
