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 相关文章推荐
不用MOUSEMOVE也能滑动啊
May 23 Javascript
纯文字版返回顶端的js代码
Aug 01 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
Dec 27 Javascript
JavaScript自定义日期格式化函数详细解析
Jan 14 Javascript
jQuery CSS()方法改变现有的CSS样式
Aug 20 Javascript
深入学习jQuery Validate表单验证
Jan 18 Javascript
ES6中Proxy代理用法实例浅析
Apr 06 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
Apr 10 Javascript
JS实现上传图片实时预览功能
May 22 Javascript
基于JavaScript实现抽奖系统
Jan 16 Javascript
vue elementui form表单验证的实现
Nov 11 Javascript
Typescript的三种运行方式(小结)
Sep 18 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 Mysql日期和时间函数集合
2007/11/16 PHP
关于php curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
2017/08/15 PHP
用 Javascript 验证表单(form)中多选框(checkbox)值
2009/09/08 Javascript
JavaScript DOM 学习第九章 选取范围的介绍
2010/02/19 Javascript
JS获取当前网址、主机地址项目根路径
2013/11/19 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
2015/07/31 Javascript
jquery实现图片预加载
2015/12/25 Javascript
全面理解JavaScript中的继承(必看)
2016/06/16 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
jQuery中ScrollTo用法示例
2016/09/04 Javascript
微信小程序实现全国机场索引列表
2018/01/31 Javascript
js canvas画布实现高斯模糊效果
2018/11/27 Javascript
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
2020/02/01 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
微信小程序实现多行文字滚动
2020/11/18 Javascript
Django如何实现内容缓存示例详解
2017/09/24 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
Python2包含中文报错的解决方法
2018/07/09 Python
django的csrf实现过程详解
2019/07/26 Python
python pygame实现球球大作战
2019/11/25 Python
Python猴子补丁Monkey Patch用法实例解析
2020/03/23 Python
Django 实现将图片转为Base64,然后使用json传输
2020/03/27 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
乌克兰在线药房:Аптека24
2019/10/30 全球购物
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
校班主任推荐信范文
2013/12/03 职场文书
2014年大学生党员评议表自我评价
2014/09/20 职场文书
酒店辞职书怎么写
2015/02/26 职场文书
车间质检员岗位职责
2015/04/08 职场文书
ipad隐藏软件app图标方法
2022/04/19 数码科技