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 相关文章推荐
HTTP状态代码以及定义(解释)
Feb 02 Javascript
JavaScript 克隆数组最简单的方法
Feb 12 Javascript
Js中获取frames中的元素示例代码
Jul 30 Javascript
通过url查找a元素应用案例
Apr 29 Javascript
详解JS-- 浮点数运算处理
Nov 28 Javascript
Servlet实现文件上传,可多文件上传示例
Dec 05 Javascript
js继承实现方法详解
Dec 16 Javascript
实例讲解JavaScript截取字符串
Nov 30 Javascript
微信小程序实现的自定义分享功能示例
Feb 12 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 Javascript
js判断鼠标移入移出方向的方法
Jun 24 Javascript
简单了解JavaScript作用域
Jul 31 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 不错的学习资料
2009/02/06 PHP
php的sso单点登录实现方法
2015/01/08 PHP
深入解析WordPress中加载模板的get_template_part函数
2016/01/11 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
JavaScript实现列出数组中最长的连续数
2014/12/29 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
AngularJS监听路由变化的方法
2017/03/07 Javascript
addEventListener()与removeEventListener()解析
2017/04/20 Javascript
javascript  数组排序与对象排序的实例
2017/07/17 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
js提取中文拼音首字母的封装工具类
2018/03/12 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
python转换字符串为摩尔斯电码的方法
2015/07/06 Python
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
2016/09/19 Python
python实现Zabbix-API监控
2018/09/17 Python
python dataframe向下向上填充,fillna和ffill的方法
2018/11/28 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
python中with语句结合上下文管理器操作详解
2019/12/19 Python
python如何修改文件时间属性
2021/02/05 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
初中作文评语大全
2014/04/23 职场文书
企业安全生产承诺书
2014/05/22 职场文书
航空学院求职信
2014/06/11 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
家长通知书家长意见
2014/12/30 职场文书
技术员岗位职责范本
2015/04/11 职场文书
六一亲子活动感想
2015/08/07 职场文书
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS
纯 CSS 自定义多行省略的问题(从原理到实现)
2021/11/11 HTML / CSS
Python中Matplotlib的点、线形状、颜色以及绘制散点图
2022/04/07 Python