//屏幕的有效宽高
window.screen.availWidth
window.screen.availHeight
//屏幕的分辨率宽高
window.screen.width
window.screen.height
//网页可见区域宽高
document.body.offsetWidth
document.body.offsetHeight
//body对象宽高
document.body.clientWidth
document.body.clientHeight
document.documentElement.clientWidth
document.documentElement.clientHeight
/*注:若body的padding值与margin值都设置为0则与网页可见区域值相同*/
//网页被卷去的高左
document.body.scrollTop
document.body.scrollLeft
document.documentElement.scrollTop
document.documentElement.scrollLeft
//屏幕可用工作区域宽高
window.screen.availHeight
window.screen.availWidth
//网页正文全文宽高:
document.body.scrollWidth
document.body.scrollHeight
//网页正文部分上
window.screenTop
window.screenLeft
//HTML精确定位
//获取对象的滚动高度
scrollHeight
//设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollLeft
//设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollTop
//获取对象的滚动宽度
scrollWidth
//获取对象相对于版面或由父坐标offsetParent属性指定的父坐标的计算左侧位置与顶端位置
offsetLeft
offsetTop
//相对文档的水平坐标 垂直坐标
event.clientX
event.clientY
//相对容器的 水平坐标 垂直坐标
event.offsetX
event.offsetY
//垂直方向滚动的值
document.documentElement.scrollTop
//浏览器差异
IE,FireFox 差异如下:
IE6.0、FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5:
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(注:CSS中的margin属性与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
要得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:若要检测窗口的真实尺寸,在Netscape下需要使用Window的属性;在IE下需要深入Document内部对body进行检测;在DOM环境下,若要得到窗口的尺寸,需要注意根元素的尺寸,而不是元素。
Window对象的innerWidth属性包含当前窗口的内部宽度,innerHeight属性包含当前窗口的内部高度。
Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。
document.body.clientHeight表示HTML文档所在窗口的当前高度,表示HTML文档所在窗口的当前宽度。