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 相关文章推荐
js实现图片放大缩小功能后进行复杂排序的方法
Nov 08 Javascript
javascript中怎么做对象的类型判断
Nov 11 Javascript
jquery使用$(element).is()来判断获取的tagName
Aug 24 Javascript
jQuery中:lt选择器用法实例
Dec 29 Javascript
JavaScript实现表格快速变色效果代码
Aug 19 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 Javascript
js脚本编写简单刷票投票系统
Jun 27 Javascript
vue组件实现弹出框点击显示隐藏效果
Oct 26 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
Sep 18 Javascript
vue中v-show和v-if的异同及v-show用法
Jun 06 Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 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
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
PHP中date()日期函数有关参数整理
2011/07/19 PHP
php调用方法mssql_fetch_row、mssql_fetch_array、mssql_fetch_assoc和mssql_fetch_objcect读取数据的区别
2012/08/08 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
理解Javascript_08_函数对象
2010/10/15 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
2013/12/19 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
深入分析Javascript事件代理
2016/01/30 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
2016/04/18 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
tracking.js页面人脸识别插件使用方法
2020/04/16 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
2019/06/04 jQuery
ionic2.0双击返回键退出应用
2019/09/17 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
使用Python发送各种形式的邮件的方法汇总
2015/11/09 Python
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
python批量设置多个Excel文件页眉页脚的脚本
2018/03/14 Python
python爬取网易云音乐评论
2018/11/16 Python
基于python生成器封装的协程类
2019/03/20 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
python re模块常见用法例举
2021/03/01 Python
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
2012/12/09 HTML / CSS
html5 音乐播放器 audio 标签使用概述
2013/07/15 HTML / CSS
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
Myprotein芬兰官网:欧洲第一运动营养品牌
2019/05/05 全球购物
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
知名企业招聘广告词大全
2014/03/18 职场文书
危爆物品安全大检查大整治工作方案
2014/05/03 职场文书
驾驶员安全责任书范本
2014/07/24 职场文书
2014年银行员工年终自我评价
2014/09/19 职场文书
春节晚会开场白
2015/05/29 职场文书
忠诚与背叛观后感
2015/06/04 职场文书
Python实现日志实时监测的示例详解
2022/04/06 Python