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 相关文章推荐
分享十五个最佳jQuery 幻灯插件和教程
Mar 27 Javascript
Javascript代码在页面加载时的执行顺序介绍
May 03 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
Oct 22 Javascript
异步JS框架的作用以及实现方法
Oct 29 Javascript
JavaScript仿支付宝密码输入框
Dec 29 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
Nov 16 Javascript
判断横屏竖屏(三种)
Feb 13 Javascript
js+html制作简单验证码
Feb 16 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
JQuery属性操作与循环用法示例
May 15 jQuery
koa2的中间件功能及应用示例
Mar 05 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/02 无线电
印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程
2021/03/03 冲泡冲煮
php 小乘法表实现代码
2009/07/16 PHP
simplehtmldom Doc api帮助文档
2012/03/26 PHP
PHP5常用函数列表(分享)
2013/06/07 PHP
php获取网站百度快照日期的方法
2015/07/29 PHP
Yii使用技巧大汇总
2015/12/29 PHP
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
javascript表单验证和Window详解
2014/12/11 Javascript
javascript折半查找详解
2015/01/26 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
一分钟理解js闭包
2016/05/04 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
深入浅析JS Function()构造函数
2016/08/22 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
2017/09/14 Javascript
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
微信小程序实现拼图小游戏
2020/10/22 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
python抓取京东商城手机列表url实例代码
2013/12/18 Python
Python中Threading用法详解
2017/12/27 Python
python pandas写入excel文件的方法示例
2019/06/25 Python
在Python中预先初始化列表内容和长度的实现
2019/11/28 Python
Python程序控制语句用法实例分析
2020/01/14 Python
大学学习生活感言
2014/01/18 职场文书
酒后驾驶检讨书
2014/01/27 职场文书
投标邀请书范文
2014/01/31 职场文书
仓管员岗位责任制
2014/02/19 职场文书
期中考试复习计划
2015/01/19 职场文书
团代会闭幕词
2015/01/28 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
postgresql无序uuid性能测试及对数据库的影响
2021/06/11 PostgreSQL