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 TextBox自动完成条
Jul 22 Javascript
JavaScript 读取元素的CSS信息的代码
Feb 07 Javascript
JS将制定内容复制到剪切板示例代码
Feb 11 Javascript
Node.js模块加载详解
Aug 16 Javascript
jQuery淡入淡出元素让其效果更为生动
Sep 01 Javascript
用NODE.JS中的流编写工具是要注意的事项
Mar 01 Javascript
Three.js基础学习之场景对象
Sep 27 Javascript
Vue Socket.io源码解读
Feb 07 Javascript
vue实现简单loading进度条
Jun 06 Javascript
基于React Native 0.52实现轮播图效果
Aug 25 Javascript
vue使用recorder.js实现录音功能
Nov 22 Javascript
如何通过JS实现转码与解码
Feb 21 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
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
PHP5 安装方法
2006/10/09 PHP
用PHP4访问Oracle815
2006/10/09 PHP
简单的PHP图片上传程序
2008/03/27 PHP
thinkphp模板输出技巧汇总
2014/11/24 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
浅谈ThinkPHP中initialize和construct的区别
2017/04/01 PHP
php防止表单重复提交实例讲解
2019/02/11 PHP
jQuery使用手册之一
2007/03/24 Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
2010/07/26 Javascript
模拟select的代码
2011/10/19 Javascript
jquery offset函数应用实例
2012/11/14 Javascript
js捕获鼠标滚轮事件代码
2013/12/16 Javascript
Jquery如何实现点击时高亮显示代码
2014/01/22 Javascript
深入浅析JavaScript面向对象和原型函数
2016/02/06 Javascript
js选择器全面解析
2016/06/27 Javascript
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
除Console.log()外更多的Javascript调试命令
2018/01/24 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
2018/03/28 Javascript
vue+echarts实现动态折线图的方法与注意
2020/09/01 Javascript
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
python中68个内置函数的总结与介绍
2020/02/24 Python
pytorch实现查看当前学习率
2020/06/24 Python
基于Python爬取fofa网页端数据过程解析
2020/07/13 Python
35款精致的 CSS3 和 HTML5 网页模板 推荐
2012/08/03 HTML / CSS
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
Charles & Colvard官网:美国莫桑石品牌
2019/06/05 全球购物
如何手工释放资源
2013/12/15 面试题
培训协议书范本
2014/04/22 职场文书
2015年环保局工作总结
2015/05/22 职场文书
父母教会我观后感
2015/06/17 职场文书
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python