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解析XML示例代码
Sep 05 Javascript
JavaScript模拟实现键盘打字效果
Jun 29 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 Javascript
深入浅析Vue组件开发
Nov 25 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
Jan 11 Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 Javascript
VUE中v-model和v-for指令详解
Jun 23 Javascript
Vue2.0用户权限控制解决方案
Nov 29 Javascript
在vscode中统一vue编码风格的方法
Feb 22 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 Javascript
vue Cli 环境删除与重装教程 - 版本文档
Sep 11 Javascript
Swiper实现导航栏滚动效果
Oct 16 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设计模式 Singleton(单例模式)
2011/06/26 PHP
php对大文件进行读取操作的实现代码
2013/01/23 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
JQuery 确定css方框模型(盒模型Box Model)
2010/01/22 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
js转义字符介绍
2013/11/05 Javascript
javascript实现的固定位置悬浮窗口实例
2015/04/30 Javascript
理解javascript异步编程
2016/01/27 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
2016/04/25 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
微信小程序实战之自定义抽屉菜单(7)
2017/04/18 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
2017/10/19 Javascript
基于js实现数组相邻元素上移下移
2020/05/19 Javascript
js实现3D旋转效果
2020/08/18 Javascript
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
python删除某个字符
2018/03/19 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
python读写文件write和flush的实现方式
2020/02/21 Python
使用python检查yaml配置文件是否符合要求
2020/04/09 Python
django-orm F对象的使用 按照两个字段的和,乘积排序实例
2020/05/18 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
详解Django ORM引发的数据库N+1性能问题
2020/10/12 Python
一款简洁的纯css3代码实现的动画导航
2014/10/31 HTML / CSS
html5 video标签屏蔽右键视频另存为的js代码
2013/11/12 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
2020/08/12 HTML / CSS
基本款天堂:Everlane
2017/05/13 全球购物
OPPO手机官方商城:中国手机市场出货量第一品牌
2017/10/18 全球购物
应届生法律求职信
2013/10/22 职场文书
实习单位鉴定评语
2014/04/26 职场文书
大学班级文化建设方案
2014/05/06 职场文书
党员教师四风问题整改措施思想汇报
2014/10/08 职场文书
校园新闻广播稿5篇
2014/10/10 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers