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 相关文章推荐
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
jquery 表单进行客户端验证demo
Aug 24 Javascript
JS中的public和private对象,即static修饰符
Jan 18 Javascript
jquery多选项卡效果实例代码(附效果图)
Mar 23 Javascript
js 鼠标移动显示图片的简单实例
Dec 25 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
Sep 03 Javascript
Bootstrap框架安装使用详解
Jan 21 Javascript
让你彻底掌握es6 Promise的八段代码
Jul 26 Javascript
详解HTML5 使用video标签实现选择摄像头功能
Oct 25 Javascript
微信小程序实现左滑修改、删除功能
Oct 19 Javascript
详解小程序横屏方案对比
Jun 28 Javascript
js实现滑动滑块验证登录
Jul 24 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
FirePHP 推荐一款PHP调试工具
2011/04/23 PHP
php设计模式 Singleton(单例模式)
2011/06/26 PHP
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
2011/11/14 Javascript
JQuery的read函数与js的onload不同方式实现
2013/03/18 Javascript
巧用局部变量提升javascript性能
2014/02/24 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
2016/05/27 Javascript
浅析如何利用JavaScript进行语音识别
2016/10/27 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
解决Vue打包之后文件路径出错的问题
2018/03/06 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
[01:03:00]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第一局
2016/02/25 DOTA
python实现识别相似图片小结
2016/02/22 Python
python简单实例训练(21~30)
2017/11/15 Python
python实现简单日期工具类
2019/04/24 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
python 有效的括号的实现代码示例
2019/11/11 Python
python GUI库图形界面开发之PyQt5布局控件QGridLayout详细使用方法与实例
2020/03/06 Python
python自动下载图片的方法示例
2020/03/25 Python
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限
2012/12/13 面试题
医药代表个人的求职信分享
2013/12/08 职场文书
巧克力蛋糕店创业计划书
2014/01/14 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
2014年小学语文工作总结
2014/12/20 职场文书
行政文员岗位职责
2015/02/04 职场文书
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python