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 相关文章推荐
js类后台管理菜单类-MenuSwitch
Sep 12 Javascript
异步动态加载js与css文件的js代码
Sep 15 Javascript
js调试系列 控制台命令行API使用方法
Jun 18 Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
Jun 22 Javascript
几种响应式文字详解
May 19 Javascript
Vue2.0 事件的广播与接收(观察者模式)
Mar 14 Javascript
微信小程序block的使用教程
Apr 01 Javascript
微信小程序canvas实现刮刮乐效果
Jul 09 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
Jan 19 Javascript
js原生map实现的方法总结
Jan 19 Javascript
vue 扩展现有组件的操作
Aug 14 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
基于PHPexecl类生成复杂的报表表头示例
2016/10/14 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
2017/08/04 PHP
xmlHTTP实例
2006/10/24 Javascript
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
实例讲解jquery中mouseleave和mouseout的区别
2016/02/17 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
详解一个小实例理解js原型和继承
2019/04/24 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
2020/07/28 Javascript
基于python实现简单日历
2018/07/28 Python
python之super的使用小结
2018/08/13 Python
详解Python_shutil模块
2019/03/15 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
详解python中的index函数用法
2019/08/06 Python
pycharm配置git(图文教程)
2019/08/16 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
python实现提取str字符串/json中多级目录下的某个值
2020/02/27 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
Python集成开发工具Pycharm的安装和使用详解
2020/03/18 Python
NUK奶瓶美国官网:NUK美国
2016/09/26 全球购物
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
介绍一下#error预处理
2015/09/25 面试题
自荐书格式
2013/12/01 职场文书
暑期培训随笔感言
2014/03/10 职场文书
2016年第二十届“母亲节暨幸福工程救助贫困母亲活动日”活动总结
2016/04/06 职场文书
Centos环境下Postgresql 安装配置及环境变量配置技巧
2021/05/18 PostgreSQL
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP