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读取ASP设定的COOKIE
Feb 15 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 Javascript
解析Jquery取得iframe中元素的几种方法
Jul 04 Javascript
jquery sortable的拖动方法示例详解
Jan 16 Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
jQuery代码实现表格中点击相应行变色功能
May 09 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 Javascript
JavaScript实现通过select标签跳转网页的方法
Sep 29 Javascript
全屏滚动插件fullPage.js使用实例解析
Oct 21 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
Jul 03 Javascript
你可能不知道的CORS跨域资源共享
Mar 13 Javascript
JavaScript运行机制实例分析
Apr 11 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正则匹配html中带class的div并选取其中内容的方法
2015/01/13 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
vue中使用echarts制作圆环图的实例代码
2018/07/27 Javascript
Python实现短网址ShortUrl的Hash运算实例讲解
2015/08/10 Python
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
Python实现代码统计工具(终极篇)
2016/07/04 Python
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
pandas DataFrame行或列的删除方法的实现示例
2019/08/02 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
使用pandas库对csv文件进行筛选保存
2020/05/25 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
2014/10/10 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
美国旅游网站:Tours4Fun
2017/02/17 全球购物
迪士尼法国在线商店:shopDisney FR
2020/12/03 全球购物
PHP如何自定义函数
2016/09/16 面试题
公共事业管理本科生求职信
2013/10/07 职场文书
急诊科护士自我鉴定
2013/10/14 职场文书
中专生自我鉴定范文
2013/12/19 职场文书
志愿者服务感言
2014/02/27 职场文书
进口业务员岗位职责
2014/04/06 职场文书
后备干部培训方案
2014/05/22 职场文书
2014年工商所工作总结
2014/12/09 职场文书
爱情保证书
2015/01/17 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
Spring Bean是如何初始化的详解
2022/03/22 Java/Android
Python实现视频自动打码的示例代码
2022/04/08 Python