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 相关文章推荐
excel操作之Add Data to a Spreadsheet Cell
Jun 12 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
Jul 09 Javascript
js取消单选按钮选中示例代码
Nov 14 Javascript
在myeclipse中如何加入jquery代码提示功能
Jun 03 Javascript
Javascript快速排序算法详解
Dec 03 Javascript
jquery form表单获取内容以及绑定数据
Feb 24 Javascript
JavaScript仿网易选项卡制作代码
Oct 06 Javascript
js实现表格筛选功能
Jan 18 Javascript
快速掌握jQuery插件开发
Jan 19 Javascript
node.js入门学习之url模块
Feb 25 Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
Jan 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在线代理转向代码
2012/05/05 PHP
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
jQuery文本框(input textare)事件绑定方法教程
2013/04/24 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
node.js中的http.request方法使用说明
2014/12/14 Javascript
Node.js中的流(Stream)介绍
2015/03/30 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
jquery.param()实现数组或对象的序列化方法
2018/10/08 jQuery
微信小程序实现滚动加载更多的代码
2019/12/06 Javascript
JavaScript中变量提升和函数提升的详解
2020/08/07 Javascript
[10:14]2018DOTA2国际邀请赛寻真——paiN Gaming不仅为自己而战
2018/08/14 DOTA
Python查看多台服务器进程的脚本分享
2014/06/11 Python
python+opencv轮廓检测代码解析
2018/01/05 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
python去掉 unicode 字符串前面的u方法
2018/10/21 Python
Jupyter打开图形界面并画出正弦函数图像实例
2020/04/24 Python
HTML5 中新的全局属性(整理)
2013/07/31 HTML / CSS
Expedia西班牙:预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
园林毕业生自我鉴定范文
2013/12/29 职场文书
班长竞选演讲稿
2014/04/24 职场文书
社会实践先进工作者事迹材料
2014/05/06 职场文书
产品包装策划方案
2014/05/18 职场文书
工作收入证明模板
2015/06/12 职场文书
担保公司2015年终工作总结
2015/10/14 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python
基于Python实现流星雨效果的绘制
2022/03/18 Python