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语言中的Literal Syntax特性分析
Mar 08 Javascript
一个js实现的所谓的滑动门
May 23 Javascript
firefox下input type=&quot;file&quot;的size是多大
Oct 24 Javascript
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
在jQuery中处理XML数据的大致方法
Aug 14 Javascript
JS函数的几种定义方式分析
Dec 17 Javascript
使用AngularJS2中的指令实现按钮的切换效果
Mar 27 Javascript
详解Vue 方法与事件处理器
Jun 20 Javascript
js继承的这6种方式!(上)
Apr 23 Javascript
使用localStorage替代cookie做本地存储
Sep 25 Javascript
JavaScript实现横版菜单栏
Mar 17 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
Aug 19 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
php小偷相关截取函数备忘
2010/11/28 PHP
PHP下通过file_get_contents的代理使用方法
2011/02/16 PHP
PHP实现限制IP访问的方法
2017/04/20 PHP
php-fpm服务启动脚本的方法
2018/04/27 PHP
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
2017/01/20 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
2017/05/22 Javascript
基于BootStrap的文本编辑器组件Summernote
2017/10/27 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
2018/01/31 jQuery
vue弹窗组件使用方法
2018/04/28 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
微信小程序中转义字符的处理方法
2019/03/28 Javascript
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
[02:48]DOTA2超级联赛专访海涛:你们的选择没有错
2013/06/07 DOTA
pandas 获取季度,月度,年度首尾日期的方法
2018/04/11 Python
numpy.std() 计算矩阵标准差的方法
2018/07/11 Python
初探利用Python进行图文识别(OCR)
2019/02/26 Python
基于python实现模拟数据结构模型
2020/06/12 Python
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
2014/03/31 HTML / CSS
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
美国转售二手商品的电子商务平台:BLINQ
2018/12/13 全球购物
IBatis持久层技术
2016/07/18 面试题
年度考核自我鉴定
2013/11/09 职场文书
化学教师自荐信范文
2013/12/28 职场文书
餐饮业员工工作决心书
2014/03/11 职场文书
岗位廉洁从业承诺书
2014/03/28 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
2015年乡镇安全生产工作总结
2015/05/19 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
在职证明范本
2015/06/15 职场文书
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS