您的位置：首页 > Web前端 > JavaScript

Javascript获取窗口的大小及位置

2013-11-12 23:35 417 查看
捣腾了二个多小时，终于找到获取窗口的方法了。现在做一个笔记，这种错误我可不想在犯一次！呵呵.......

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



我们定义一个获取游览器窗口大小的方法：

function getBrowserWindowSize(){
		var de = document.documentElement;
		//返回一个通过对象字面量创建的对象
		return {
			 widht : (window.innerWidth || (de && de.clientWidth) || document.body.clientWidth),
			 height : (window.innerHeight || (de && de.clientHeight) || document.body.clientHeight)
		};
	}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航