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辅助函数inherit()的问题
Apr 07 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
Nov 23 Javascript
Asp.Net alert弹出提示信息的几种方法总结
Jan 29 Javascript
ext中store.load跟store.reload的区别示例介绍
Jun 17 Javascript
node.js中的socket.io的广播消息
Dec 15 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 Javascript
全面详细的jQuery常见开发技巧手册
Feb 21 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
Dec 01 Javascript
vue实现PC端录音功能的实例代码
Jun 05 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 29 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
建立文件交换功能的脚本(三)
2006/10/09 PHP
php.ini 中文版
2006/10/28 PHP
配置支持SSI
2006/11/25 PHP
php中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
PHP解析目录路径的3个函数总结
2014/11/18 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
javascript cookies 设置、读取、删除实例代码
2010/04/12 Javascript
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
jquery通过a标签删除table中的一行的代码
2013/12/02 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
2015/03/13 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
深入浅析JavaScript中数据共享和数据传递
2016/04/25 Javascript
Bootstrap框架的学习教程详解(二)
2016/10/18 Javascript
JS实现标签滚动切换效果
2017/12/25 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
VUE使用axios调用后台API接口的方法
2020/08/03 Javascript
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
用Python进行TCP网络编程的教程
2015/04/29 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
python 的 scapy库,实现网卡收发包的例子
2019/07/23 Python
多个python文件调用logging模块报错误
2020/02/12 Python
Python Numpy中数据的常用保存与读取方法
2020/04/01 Python
使用CSS3的rem属性制作响应式页面布局的要点解析
2016/05/24 HTML / CSS
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
物业管理大学生个人的自我评价
2013/10/10 职场文书
实习生单位鉴定意见
2013/12/04 职场文书
优秀员工表扬信
2014/01/17 职场文书
卫生巾广告词
2014/03/18 职场文书
镇创先争优活动总结
2014/08/28 职场文书
产品陈列协议书(标准版)
2014/09/17 职场文书
婚宴主持词
2015/06/30 职场文书
新闻稿格式范文
2015/07/18 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书