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


Posted in Javascript onDecember 09, 2012

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筛选器全系列介绍
Aug 27 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
Aug 30 Javascript
自己编写的类似JS的trim方法
Oct 09 Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
Aug 23 Javascript
JavaScript实现构造json数组的方法分析
Aug 17 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 Javascript
vue开发中遇到的问题总结
Apr 07 Javascript
javascript-hashchange事件和历史状态管理实例分析
Apr 18 Javascript
微信小程序文章详情功能完整实例
Jun 03 Javascript
基于原生js实现九宫格算法代码实例
Jul 03 Javascript
js实现浏览器打印功能的示例代码
Jul 15 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
Dec 09 #Javascript
javascript操作JSON的要领总结
Dec 09 #Javascript
js写一个弹出层并锁屏效果实现代码
Dec 07 #Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
Dec 07 #Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
Dec 07 #Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
Dec 06 #Javascript
php图像生成函数之间的区别分析
Dec 06 #Javascript
You might like
PHP XML error parsing SOAP payload on line 1
2010/06/17 PHP
ThinkPHP之R方法实例详解
2014/06/20 PHP
php抓取并保存网站图片的实现代码
2015/10/28 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
javascript获得CheckBoxList选中的数量
2009/10/27 Javascript
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
jQuery操作input type=radio的实现代码
2012/06/14 Javascript
简体中文转换繁体中文(实现代码)
2013/12/25 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
2016/02/29 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
2016/04/25 Javascript
微信小程序使用 vant Dialog组件的正确方式
2020/02/21 Javascript
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
python实现ftp客户端示例分享
2014/02/17 Python
Python单例模式实例分析
2015/01/14 Python
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
利用Python如何生成随机密码
2016/04/20 Python
浅谈Python基础之I/O模型
2017/05/11 Python
python OpenCV学习笔记之绘制直方图的方法
2018/02/08 Python
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
python 函数中的内置函数及用法详解
2019/07/02 Python
解决Django migrate不能发现app.models的表问题
2019/08/31 Python
python中的Elasticsearch操作汇总
2019/10/30 Python
Python时间差中seconds和total_seconds的区别详解
2019/12/26 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
python 在sql语句中使用%s,%d,%f说明
2020/06/06 Python
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
Bealls Florida百货商店:生活服饰、家居装饰和鞋子
2018/02/23 全球购物
什么是java序列化,如何实现java序列化
2012/11/14 面试题
生态学毕业生自荐信
2013/10/27 职场文书
社会实践心得体会
2014/01/03 职场文书
基层党组织公开承诺书
2014/03/28 职场文书
给客户的感谢信
2015/01/21 职场文书
2015年医药代表工作总结
2015/04/25 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL