js获取浏览器和屏幕的各种宽度高度


Posted in Javascript onFebruary 22, 2017

一:网页可见区域宽高,不包括工具栏和滚动条(浏览器窗口可视区域大小)

1.对于IE9+、chrome、firefox、Opera、Safari:

window.innerHeight浏览器窗口的内部高度;

window.innerWidth浏览器窗口的内部宽度;

2.对于IE8.7.6.5:

document.documentElement.clientHeight:表示HTML文档所在窗口的当前高度;

document.documentElement.clientWidth:表示HTML文档所在窗口的当前宽度;

或者,因为document对象的body属性对应HTML文档的<body>标签,所以也可表示为:

document.body.clientHeight:表示HTML文档所在窗口的当前高度;

document.body.clientWidth:表示HTML文档所在窗口的当前宽度;

结论:

document.body.clientWidth/Height:的宽高偏小,高甚至默认200;

document.documentElement.clientWidth/Height 和 window.innerWidth/Height 的宽高始终相等。

所以在不同浏览器都实用的的Javascripit方案:

var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;

二:网页正文全文宽高

scrollWidth和scrollHeight获取网页内容高度和宽度

1.针对IE.Opera:scrollHeight是网页内容实际高度,可以小于clientHeight;

2.针对NS.firefox:scrollHeight是网页内容高度,不过最小值是clientHeight;也就是说网页内容实际高度小于clientHeight的时候,scrollHeight返回clientHeight;

3.浏览器兼容代码:

var w = document.documentElement.scrollWidth || document.body.scrollWidth;
var h = document.documentElement.scrollHeight || document.body.scrollHeight;

二:网页可见区域宽高,包括滚动条等边线(会随窗口的显示大小改变)

1.值:   offsetWidth = scrollWidth + 左右滚动条 +左右边框;

offsetHeight = scrollHeight + 上下滚动条 + 上下边框;

2.浏览器兼容代码:

var w = document.documentElement.offsetWidth || document.body.offsetWidth ;
var h = document.documentElement.offsetHeight || document.body.offsetHeight ;

三:网页卷去的距离与偏移量

1.scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离;

2.scrollTop:设置或获取位于给定对象最顶端与窗口中目前可见内容的最左端之间的距离;

3.offsetLeft:设置或获取位于给定对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置;

4.offsetTop:设置或获取位于给定对象相对于版面或由offsetParent属性指定的父坐标的计算顶端位置;

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jquery之Document元素选择器篇
Aug 14 Javascript
actionscript与javascript的区别
May 25 Javascript
javascript制作loading动画效果 loading效果
Jan 14 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
Angularjs中使用Filters详解
Mar 11 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 Javascript
vue-cli脚手架-bulid下的配置文件
Mar 27 Javascript
vue响应式系统之observe、watcher、dep的源码解析
Apr 09 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 Javascript
Javascript异步执行不按顺序解决方案
Apr 30 Javascript
vue如何清除浏览器历史栈
May 25 Vue.js
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 #Javascript
高效的jQuery代码编写技巧总结
Feb 22 #Javascript
JS拉起或下载app的实现代码
Feb 22 #Javascript
js实现带简单弹性运动的导航条
Feb 22 #Javascript
bootstrap fileinput 插件使用项目总结(经验)
Feb 22 #Javascript
javascript 网页进度条简单实例
Feb 22 #Javascript
详解闭包解决jQuery中AJAX的外部变量问题
Feb 22 #Javascript
You might like
如何使用“PHP” 彩蛋进行敏感信息获取
2013/08/07 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
jquery手风琴特效插件
2015/02/04 Javascript
javascript格式化日期时间方法汇总
2015/06/19 Javascript
Bootstrap项目实战之子栏目资讯内容
2016/04/25 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
2016/06/27 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
JS实现课堂随机点名和顺序点名
2017/03/09 Javascript
微信小程序Echarts覆盖正常组件问题解决
2019/07/13 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
vue实现把接口单独存放在一个文件方式
2020/08/13 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
python中assert用法实例分析
2015/04/30 Python
把csv文件转化为数组及数组的切片方法
2018/07/04 Python
python使用response.read()接收json数据的实例
2018/12/19 Python
Python实现时间序列可视化的方法
2019/08/06 Python
Pandas时间序列:时期(period)及其算术运算详解
2020/02/25 Python
python能做哪些生活有趣的事情
2020/09/09 Python
python装饰器实现对异常代码出现进行自动监控的实现方法
2020/09/15 Python
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
canvas实现滑动验证的实现示例
2020/08/11 HTML / CSS
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
Vans奥地利官方网站:美国原创极限运动潮牌
2018/09/30 全球购物
大码女装:Ulla Popken
2019/08/06 全球购物
酒店管理自荐信
2013/10/23 职场文书
七年级地理教学反思
2014/01/26 职场文书
阳光体育活动方案
2014/02/16 职场文书
优秀团队获奖感言
2014/02/19 职场文书
升国旗仪式主持词
2014/03/19 职场文书
我的中国梦演讲稿600字
2014/08/19 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
人事部:年度述职报告范文
2019/07/12 职场文书