Javascript获取窗口(容器)的大小及位置参数列举及简要说明
更新时间：2012年12月09日 17:27:54 作者：
Javascript获取窗口（容器）的大小及位置一系列的东西比较多，容易混淆，在这里列举及简要说明下,需要的朋友可以参考下
Javascript获取窗口（容器）的大小及位置一系列的东西比较多，容易混淆，在这里列举及简要说明下：
属性方法说明：
clientX 相对文档的水平坐标;
clientY 相对文档的垂直坐标;
offsetX 相对容器的水平坐标;
offsetY 相对容器的垂直坐标;
scrollWidth 获取对象的滚动宽度;
scrollHeight 获取对象的滚动高度;
scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 ;
scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 ;
offsetWidth 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度;
offsetHeight 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度;
offsetLeft 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 ;
offsetTop 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置.
Javascript获取屏幕、窗口大小方法：
屏幕分辨率的高：window.screen.height ;
屏幕分辨率的宽：window.screen.width ;
屏幕可用工作区高度（不包含任务栏）：window.screen.availHeight ;
屏幕可用工作区宽度（不包含任务栏）：window.screen.availWidth;
网页可见区域宽（不包含滚动条和边框）：document.body.clientWidth ;
网页可见区域高（不包含滚动条和边框）：document.body.clientHeight;
网页可见区域宽（包含滚动条和边框）：document.body.offsetWidth ;
网页可见区域高（包含滚动条和边框）：document.body.offsetHeight ;
网页正文宽：document.body.scrollWidth ;
网页正文高：document.body.scrollHeight ;
网页被卷去的高：document.body.scrollTop ;
网页被卷去的左：document.body.scrollLeft ;
网页正文部分上（网页正文最左边距离屏幕左边缘的距离）：window.screenTop ;
网页正文部分左（网页正文最上边距离屏幕上边缘的距离）：window.screenLeft .
注：有时会出现取不到值的情况，是因为html文件头部加了文档类型：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> ，
此时把document.body.scrollTop和document.body.scrollLeft改为：document.documentElement.scrollTop 和document.documentElement.scrollLeft即可，document.body.clientWidth和document.body.clientHeight也要改为：document.documentElement.clientWidth和document.documentElement.clientHeight
当然还有疏漏或没说明清楚的地方，大家可以补充、讨论或者百度百度，一起进步！ye~
属性方法说明：
clientX 相对文档的水平坐标;
clientY 相对文档的垂直坐标;
offsetX 相对容器的水平坐标;
offsetY 相对容器的垂直坐标;
scrollWidth 获取对象的滚动宽度;
scrollHeight 获取对象的滚动高度;
scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 ;
scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 ;
offsetWidth 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度;
offsetHeight 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度;
offsetLeft 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 ;
offsetTop 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置.
Javascript获取屏幕、窗口大小方法：
屏幕分辨率的高：window.screen.height ;
屏幕分辨率的宽：window.screen.width ;
屏幕可用工作区高度（不包含任务栏）：window.screen.availHeight ;
屏幕可用工作区宽度（不包含任务栏）：window.screen.availWidth;
网页可见区域宽（不包含滚动条和边框）：document.body.clientWidth ;
网页可见区域高（不包含滚动条和边框）：document.body.clientHeight;
网页可见区域宽（包含滚动条和边框）：document.body.offsetWidth ;
网页可见区域高（包含滚动条和边框）：document.body.offsetHeight ;
网页正文宽：document.body.scrollWidth ;
网页正文高：document.body.scrollHeight ;
网页被卷去的高：document.body.scrollTop ;
网页被卷去的左：document.body.scrollLeft ;
网页正文部分上（网页正文最左边距离屏幕左边缘的距离）：window.screenTop ;
网页正文部分左（网页正文最上边距离屏幕上边缘的距离）：window.screenLeft .
注：有时会出现取不到值的情况，是因为html文件头部加了文档类型：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> ，
此时把document.body.scrollTop和document.body.scrollLeft改为：document.documentElement.scrollTop 和document.documentElement.scrollLeft即可，document.body.clientWidth和document.body.clientHeight也要改为：document.documentElement.clientWidth和document.documentElement.clientHeight
当然还有疏漏或没说明清楚的地方，大家可以补充、讨论或者百度百度，一起进步！ye~
相关文章
这篇文章主要介绍了JS回到顶部，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要介绍了介绍JavaScript中Math.abs()方法的使用,是JS入门学习中的基础知识,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了在JavaScript中使用NaN值的方法,是JS入门学习中的基础知识,需要的朋友可以参考下2015-06-06
这篇文章介绍了JavaScript splice()方法，有需要的朋友可以参考一下2013-11-11
JavaScript高级程序设计（第3版）学习笔记2 js基础语法
这一篇复习一下ECMAScript规范中的基础语法，英文好的朋友可以直接阅读官方文档。JavaScript本质上也是一种类C语言，熟悉C语言的朋友，可以非常轻松的阅读这篇文章，甚至都可以跳过，不过建议你最好还是看一看，在介绍的同时，我可能会引用一些自认为不易理解且比较流行的用法。2012-10-10
Document想必大家并不陌生吧，在使用js的过程中会经常遇到它，那么它有哪些属性、哪些方法，在本文将以示例为大家详细介绍下，希望对大家有所帮助2013-09-09
这篇文章主要简单介绍了Unicode与JavaScript的发展史的相关资料,需要的朋友可以参考下2015-01-01
个人总结的一些关于String、Function、Array的属性和用法
个人总结的一些关于String、Function、Array的属性和用法...2007-01-01
这篇文章主要介绍了JS传播事件、取消事件默认行为、阻止事件传播,通过事件处理程序的返回值 调用顺序讲解了详细的过程,需要的朋友可以参考下2017-08-08
[红色]js技巧收集(200多个) 超强推荐...2007-02-02
最新评论