js获取浏览器宽高、网页宽高、屏幕宽高、鼠标位置等（带图片说明）
网页可见区域宽：
document.body.clientWidth;
网页可见区域高：
document.body.clientHeight;
（点击查看大图）
网页可见区域宽：
document.body.offsetWidth (包括边线的宽);
网页可见区域高：
document.body.offsetHeight (包括边线的宽);
（点击查看大图）
有没有发现，offsetWidth和clientWidth的区别，offsetWidt是连滚动条一起包含在内的。
网页正文全文宽：
document.body.scrollWidth;
网页正文全文高：
document.body.scrollHeight;
（点击查看大图）
?
无论DTD是否声明，在HTML中，document.body.scrollHeight和document.body.scrollWidth 都表示浏览器所有内容高度。
这里有一个要注意的地方，兼容性的写法 document.documentElement.scrollHeight
在DTD声明中的不同表现
具体可以参考
http://www.cnblogs.com/blackwood/archive/2013/03/12/2955472.html
网页被卷去的高：
document.body.scrollTop;
网页被卷去的左：
document.body.scrollLeft;
（点击查看大图）
DTD是否声明，影响scrollTop的值，请参考
http://www.kixi.com.cn/blog/?p=2811
浏览器的位置上：
window.screenTop;
浏览器的位置左：
window.screenLeft;
（点击查看大图）
在IE和FF的浏览器中，分别要使用screenTop和screenY，screenLeft和screenX
具体请参考：
浏览器窗口位置Window
screenLeft、screenTop属性
屏幕分辨率的高：
window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度：
window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;
（点击查看大图）
window.screen.availHeight和window.screen.availWidth表示屏幕的高/宽（除开屏幕底的状态条）像素
window.screen.heght和window.screen.width表示屏幕的全高和全宽（包含底部的工具栏）
可以查看在线实例，自己仔细体会下！
js调用screen的相关属性
pageX鼠标点所在位置的X轴全像素位移（包含滚动的部分）
pageY鼠标点所在位置的Y轴全像素位移（包含滚动的部分）
（点击查看大图）
在线测试##http://jsfiddle.net/kixi/3HEJe/
offsetX鼠标所在位置对应的元素的左上角（0，0）与鼠标点的X轴的像素距离,IE、chrome下有效
offsetY鼠标所在位置对应的元素的左上角（0，0）与鼠标点的Y轴的像素距离,IE、chrome下有效
（点击查看大图）
在线例子 http://jsfiddle.net/kixi/5EL6m/
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
