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 撑出页面文字换行
Jun 15 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
Jan 04 Javascript
JQuery切换显示的效果实例代码
Feb 27 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
Jul 04 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
Jan 09 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
Jun 22 Javascript
js实现缓冲运动效果的方法
Apr 10 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 Javascript
Vue2.0 v-for filter列表过滤功能的实现
Sep 07 Javascript
vue中使用elementUI组件手动上传图片功能
Dec 13 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/01 无线电
php使用PDO操作MySQL数据库实例
2014/12/30 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
VBScript版代码高亮
2006/06/26 Javascript
jQuery 性能优化手册 推荐
2010/02/23 Javascript
onbeforeunload与onunload事件异同点总结
2013/06/24 Javascript
js里取容器大小、定位、距离等属性搜集整理
2013/08/19 Javascript
Extjs4中的分页应用结合前后台
2013/12/13 Javascript
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
触屏中的JavaScript事件分析
2015/02/06 Javascript
JavaScript里实用的原生API汇总
2015/05/14 Javascript
JavaScript中判断两个字符串是否相等的方法
2015/07/07 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
js中json处理总结之JSON.parse
2016/10/14 Javascript
JavaScript编写一个贪吃蛇游戏
2017/03/09 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
[08:08]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY
2014/06/25 DOTA
Python格式化css文件的方法
2015/03/10 Python
Python常用特殊方法实例总结
2019/03/22 Python
python编写猜数字小游戏
2019/10/06 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
关于numpy.where()函数 返回值的解释
2019/12/06 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
深入理解Python 多线程
2020/06/16 Python
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
美国在线工具商店:Acme Tools
2018/06/26 全球购物
瑞典在互联网上最大的宠物商店:Animail
2020/10/31 全球购物
顶岗实习计划书
2015/01/16 职场文书
预备党员入党感想
2015/08/10 职场文书