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 相关文章推荐
DEFER怎么用?
Jul 01 Javascript
不错的新闻标题颜色效果
Dec 10 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
Jul 02 Javascript
与Math.pow 相反的函数使用介绍
Aug 04 Javascript
js阻止事件追加的具体实现
Oct 15 Javascript
JavaScript电子时钟倒计时
Jan 09 Javascript
JQuery在循环中绑定事件的问题详解
Jun 02 Javascript
利用Javascript实现BMI计算器
Aug 16 Javascript
Node.js用readline模块实现输入输出
Dec 16 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 Javascript
JS封装cavans多种滤镜组件
Feb 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
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
过滤掉PHP数组中的重复值的实现代码
2011/07/17 PHP
AES加解密在php接口请求过程中的应用示例
2016/10/26 PHP
PHP正则表达式笔记与实例详解
2019/05/09 PHP
索趣科技的答案
2007/02/07 Javascript
JavaScript prototype属性使用说明
2010/05/13 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
2011/04/02 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
2015/08/07 Javascript
JQuery实现左右滚动菜单特效
2015/09/28 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
Angular2.js实现表单验证详解
2017/06/23 Javascript
easyui简介_动力节点Java学院整理
2017/07/14 Javascript
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
vue下history模式刷新后404错误解决方法
2018/08/18 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
JS实现电话号码的字母组合算法示例
2019/02/26 Javascript
JS将时间秒转换成天小时分钟秒的字符串
2019/07/10 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
[52:37]完美世界DOTA2联赛循环赛 Forest vs DM BO2第一场 10.29
2020/10/29 DOTA
python实现统计代码行数的方法
2015/05/22 Python
图文详解WinPE下安装Python
2016/05/17 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
使用PyTorch将文件夹下的图片分为训练集和验证集实例
2020/01/08 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
expedia比利时:预订航班+酒店并省钱
2018/07/13 全球购物
初一科学教学反思
2014/01/27 职场文书
大堂副理的岗位职责范文
2014/02/17 职场文书
小学班级口号
2014/06/09 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
违纪开除通知书
2015/04/25 职场文书
安全温馨提示语大全
2015/07/14 职场文书