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 相关文章推荐
javascript实现的鼠标链接提示效果生成器代码
Jun 28 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
Sep 20 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 Javascript
JS组件中bootstrap multiselect两大组件较量
Jan 26 Javascript
JQuery fileupload插件实现文件上传功能
Mar 18 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
Jul 01 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
JS原生轮播图的简单实现(推荐)
Jul 22 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
Mar 14 Javascript
jQuery 实现扁平式小清新导航
Jul 07 jQuery
TypeScript魔法堂之枚举的超实用手册
Oct 29 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实现假装商品限时抢购繁忙的效果
2015/10/16 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
PHP实现多图上传和单图上传功能
2018/05/17 PHP
PHP ADODB实现事务处理功能示例
2018/05/25 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
PHP中SESSION过期设置
2021/03/09 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
js prototype 格式化数字 By shawl.qiu
2007/04/02 Javascript
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
浅析IE10兼容性问题(frameset的cols属性)
2014/01/03 Javascript
JS修改iframe页面背景颜色的方法
2015/04/01 Javascript
Javascript实现Array和String互转换的方法
2015/12/21 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
2016/03/29 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
2016/09/28 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
2017/01/21 Javascript
浅谈super-vuex使用体验
2018/06/25 Javascript
[58:37]Serenity vs Fnatic 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python实现发送邮件及附件功能
2021/03/02 Python
python使用Apriori算法进行关联性解析
2017/12/21 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
Python3 翻转二叉树的实现
2019/09/30 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
使用Python操作MySQL的小技巧
2020/09/10 Python
浅谈matplotlib默认字体设置探索
2021/02/03 Python
《罗布泊,消逝的仙湖》教学反思
2014/03/01 职场文书
创业者迈进成功第一步:如何写创业计划书?
2014/03/22 职场文书
2014年企业党支部工作总结
2014/12/04 职场文书
2015年大学辅导员工作总结
2015/05/12 职场文书
旗帜观后感
2015/06/08 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
oracle通过存储过程上传list保存功能
2021/05/12 Oracle