JavaScript获取网页、浏览器、屏幕高度和宽度汇总


Posted in Javascript onDecember 18, 2014

经常发现在写JavaScript的时候,都需要用到网页、浏览器或屏幕的高度和宽度来解决布局定位的问题,时常前用后忘,要不就是在网上search,干脆自己总结一下,这样也方便再次使用,省时省力。

网页可见区域宽: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
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

IE,FireFox 差异如下:

IE6.0、FF1.06+:

clientWidth = width + padding 

clientHeight = height + padding 

offsetWidth = width + padding + border 

offsetHeight = height + padding + border

IE5.0/5.5:

clientWidth = width - border 

clientHeight = height - border 

offsetWidth = width 

offsetHeight = height

总结:关于高度和宽度的东西到是挺多的,具体的有些自己也没有弄懂,通过自己试验了一下,有些得出的值是一样,所以很让人迷惑,只能视情况而定了。

Javascript 相关文章推荐
IE8 下的Js错误HTML Parsing Error...
Aug 14 Javascript
js 页面传参数时 参数值含特殊字符的问题
Dec 13 Javascript
js判断输入是否为数字的具体实例
Aug 03 Javascript
JavaScript排序算法之希尔排序的2个实例
Apr 04 Javascript
javascript字母大小写转换的4个函数详解
May 09 Javascript
js实现页面跳转重定向的几种方式
May 29 Javascript
jquery使用$(element).is()来判断获取的tagName
Aug 24 Javascript
使用jquery插件qrcode生成二维码
Oct 22 Javascript
jQuery简单实现title提示效果示例
Aug 01 Javascript
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
Vue-cli-webpack搭建斗鱼直播步骤详解
Nov 17 Javascript
js 数据类型判断的方法
Dec 03 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 #Javascript
使用jQuery jqPlot插件绘制柱状图
Dec 18 #Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
Dec 18 #Javascript
使用JS获取当前地理位置方法汇总
Dec 18 #Javascript
node.js中的fs.chmodSync方法使用说明
Dec 18 #Javascript
node.js中的fs.chmod方法使用说明
Dec 18 #Javascript
原生Ajax 和jQuery Ajax的区别示例分析
Dec 17 #Javascript
You might like
PHP文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
php下载文件,添加响应头的简单实例
2016/09/22 PHP
javascript调试说明
2010/06/07 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
2011/10/08 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
jQuery修改CSS伪元素属性的方法
2014/07/30 Javascript
JS获取各种宽度、高度的简单介绍
2014/12/19 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
AngularJS 入门教程之事件处理器详解
2016/08/19 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
2017/06/22 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
jQuery轻量级表单模型验证插件
2018/10/15 jQuery
[56:01]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 Effect vs EG
2018/03/31 DOTA
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
Python3安装Pymongo详细步骤
2017/05/26 Python
Python中使用haystack实现django全文检索搜索引擎功能
2017/08/26 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
在Pycharm中使用GitHub的方法步骤
2019/06/13 Python
详解Python实现进度条的4种方式
2020/01/15 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
在python中求分布函数相关的包实例
2020/04/15 Python
Python3如何在服务器打印资产信息
2020/08/27 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
New Balance德国官方网站:购买鞋子和服装
2019/08/31 全球购物
数控加工专业毕业生自荐信
2013/09/27 职场文书
销售会计工作职责
2013/12/02 职场文书
企划主管岗位职责
2013/12/12 职场文书
yy结婚证婚词
2014/01/10 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
redis复制有可能碰到的问题汇总
2022/04/03 Redis
Linux、ubuntu系统下查看显卡型号、显卡信息详解
2022/04/07 Servers