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 相关文章推荐
Jvascript学习实践案例(开发常用)
Jun 25 Javascript
jquery链式操作的正确使用方法
Jan 06 Javascript
JavaScript中字符串拼接的基本方法
Jul 07 Javascript
浅谈js基本数据类型和typeof
Aug 09 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
Sep 13 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
Bootstrap模态框调用功能实现方法
Sep 19 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
Oct 20 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
Dec 22 Javascript
详解Vue中watch的高级用法
May 02 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
JavaScript数组reduce()方法的语法与实例解析
Jul 07 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
一些花式咖啡的配方
2021/03/03 冲泡冲煮
让你的PHP同时支持GIF、png、JPEG
2006/10/09 PHP
基于php iconv函数的使用详解
2013/06/09 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
php header函数的常用http头设置
2015/06/25 PHP
四个PHP非常实用的功能
2015/09/29 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
浅谈angularjs $http提交数据探索
2017/01/20 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
这样回答继承可能面试官更满意
2019/12/10 Javascript
angular中的post请求处理示例详解
2020/06/30 Javascript
详解JavaScript 异步编程
2020/07/13 Javascript
JS面向对象实现飞机大战
2020/08/26 Javascript
闭包在python中的应用之translate和maketrans用法详解
2014/08/27 Python
Python re模块介绍
2014/11/30 Python
python实现用户管理系统
2018/01/10 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
Python自动化测试笔试面试题精选
2020/03/12 Python
Java提供了哪些企业应用编程接口
2015/02/13 面试题
资产经营总监岗位职责范文
2013/12/01 职场文书
客房主管岗位职责
2013/12/09 职场文书
销售员岗位职责范本
2014/02/03 职场文书
《草原的早晨》教学反思
2014/04/08 职场文书
公证书标准格式
2014/04/10 职场文书
学校志愿者活动总结
2014/06/27 职场文书
2016年优秀教师先进事迹材料
2016/02/26 职场文书
MySQL系列之十 MySQL事务隔离实现并发控制
2021/07/02 MySQL
解析redis hash应用场景和常用命令
2021/08/04 Redis
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL