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 相关文章推荐
通过修改referer下载文件的方法
May 11 Javascript
javascript 流畅动画实现原理
Sep 08 Javascript
JS target与currentTarget区别说明
Aug 28 Javascript
js 实现日期灵活格式化的小例子
Jul 14 Javascript
js获取及判断键盘按键的方法
Dec 01 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
Oct 12 Javascript
jQuery实现发送验证码并60秒倒计时功能
Nov 25 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
May 13 Javascript
你知道JavaScript Symbol类型怎么用吗
Jan 08 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 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中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
PHP提示Deprecated: mysql_connect(): The mysql extension is deprecated的解决方法
2014/08/28 PHP
使用php-timeit估计php函数的执行时间
2015/09/06 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
JavaScript 学习笔记一些小技巧
2010/03/28 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
javascript中一些util方法汇总
2015/06/10 Javascript
JavaScript中的toLocaleDateString()方法使用简介
2015/06/12 Javascript
jQuery实现图片走马灯效果的原理分析
2016/01/16 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
2016/09/14 Javascript
值得分享的JavaScript实现图片轮播组件
2016/11/21 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
vue基于mint-ui的城市选择3级联动的示例
2017/10/25 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
2018/08/07 Javascript
ES6中定义类和对象的方法示例
2019/07/31 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
Vue实现多页签组件
2021/01/14 Vue.js
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
Python快速查找list中相同部分的方法
2018/06/27 Python
python实现的MySQL增删改查操作实例小结
2018/12/19 Python
python 读取竖线分隔符的文本方法
2018/12/20 Python
python3+selenium实现qq邮箱登陆并发送邮件功能
2019/01/23 Python
Python中面向对象你应该知道的一下知识
2019/07/10 Python
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
信号量和自旋锁的区别?如何选择使用?
2015/09/08 面试题
应用心理学个人的求职信
2013/12/08 职场文书
创建青年文明号材料
2014/05/09 职场文书
单位授权委托书范文
2014/08/02 职场文书
公证委托书标准格式
2014/09/11 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
我们认为中短波广播场强仪的最佳组合
2022/04/05 无线电
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript