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 相关文章推荐
Javascript的IE和Firefox兼容性汇编
Jul 01 Javascript
如何用jquery控制表格奇偶行及活动行颜色
Apr 20 Javascript
JS实现控制表格行内容垂直对齐的方法
Mar 30 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
判断横屏竖屏(三种)
Feb 13 Javascript
微信小程序后台解密用户数据实例详解
Jun 28 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 Javascript
JS+CSS实现随机点名(实例代码)
Nov 04 Javascript
layui前端时间戳转化实例
Nov 15 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 Javascript
在HTML5 localStorage中存储对象的示例代码
Apr 21 Javascript
基于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
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
PHP设计模式之建造者模式(Builder)原理与用法案例详解
2019/12/12 PHP
JS获取父节点方法
2009/08/20 Javascript
基于jQuery试卷自动排版系统
2010/07/18 Javascript
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
2012/05/23 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
Vue列表页渲染优化详解
2017/07/24 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
Electron + vue 打包桌面操作流程详解
2019/06/24 Javascript
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
vue用BMap百度地图实现即时搜索功能
2019/09/26 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
Vue js with语句原理及用法解析
2020/09/03 Javascript
JavaScript实现点击切换功能
2021/01/27 Javascript
解决python大批量读写.doc文件的问题
2018/05/08 Python
Python3 pip3 list 出现 DEPRECATION 警告的解决方法
2019/02/16 Python
Python爬取豆瓣视频信息代码实例
2019/11/16 Python
pip install 使用国内镜像的方法示例
2020/04/03 Python
Django模板标签{% for %}循环,获取制定条数据实例
2020/05/14 Python
Veronica Beard官网:在酷、经典和别致之间找到了平衡
2018/01/11 全球购物
护士思想汇报
2014/01/12 职场文书
岗位廉政承诺书
2014/03/27 职场文书
入党介绍人评语
2014/05/06 职场文书
爱护公共设施的标语
2014/06/24 职场文书
数学教研活动总结
2014/07/02 职场文书
2014年旅游局法制宣传日活动总结
2014/11/01 职场文书
2015年“七七卢沟桥事变”纪念活动总结
2015/03/24 职场文书
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server