Javascript获取窗口(容器)的大小及位置参数列举及简要说明

所属分类：网络编程 / JavaScript 阅读数： 1797

收藏 0赞 0分享

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~

更多精彩内容其他人还在看

Javascript获取窗口(容器)的大小及位置参数列举及简要说明

jQuery LigerUI 使用教程表格篇(1)

JavaScript中常用的运算符小结

深入理解JavaScript系列(13) This? Yes,this!

javascript （用setTimeout而非setInterval）

JavaScript中两个感叹号的作用说明

javascript写的简单的计算器，内容很多，方法实用，推荐

js的表单操作简单计算器

Jquery中删除元素的实现代码

javaScript 利用闭包模拟对象的私有属性

为JavaScript类型增加方法的实现代码(增加功能)

网络赚钱

站长故事

Javascript获取窗口(容器)的大小及位置参数列举及简要说明

jQuery LigerUI 使用教程表格篇(1)

JavaScript中常用的运算符小结

深入理解JavaScript系列(13) This? Yes,this!

javascript （用setTimeout而非setInterval）

JavaScript中两个感叹号的作用说明

javascript写的简单的计算器，内容很多，方法实用，推荐

js的表单操作 简单计算器

Jquery中删除元素的实现代码

javaScript 利用闭包模拟对象的私有属性

为JavaScript类型增加方法的实现代码(增加功能)

网络赚钱

站长故事

js的表单操作简单计算器