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代码
May 09 Javascript
jQuery Tools tooltip使用说明
Jul 14 Javascript
js动态修改input输入框的type属性(实现方法解析)
Nov 13 Javascript
js导出txt示例代码
Jan 14 Javascript
php析构函数的具体用法小结
Mar 11 Javascript
node.js中的querystring.stringify方法使用说明
Dec 10 Javascript
JQuery实现DIV其他动画效果的简单实例
Sep 18 Javascript
js的三种继承方式详解
Jan 21 Javascript
vue绑定事件后获取绑定事件中的this方法
Sep 15 Javascript
jQuery带控制按钮轮播图插件
Jul 31 jQuery
js实现3D旋转相册
Aug 02 Javascript
js+canvas绘制图形验证码
Sep 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
php中修改浏览器的User-Agent来伪装你的浏览器和操作系统
2011/07/29 PHP
Session保存到数据库的php类分享
2011/10/24 PHP
PHP file_exists问题杂谈
2012/05/07 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
php筛选不存在的图片资源
2015/04/28 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
给Function做的OOP扩展
2009/05/07 Javascript
JavaScript Event学习第八章 事件的顺序
2010/02/07 Javascript
常见JS效果之图片减速度滚动实现代码
2011/12/08 Javascript
js动态往表格的td中添加图片并注册事件
2014/06/12 Javascript
JavaScript实现简单图片滚动附源码下载
2014/06/17 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
jQuery实现的无限级下拉菜单功能示例
2016/09/12 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
2016/11/07 Javascript
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
深入分析jQuery.one() 函数
2020/06/03 jQuery
Vue解决移动端弹窗滚动穿透问题
2020/12/15 Vue.js
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
python网络编程调用recv函数完整接收数据的三种方法
2017/03/31 Python
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
Python递归函数特点及原理解析
2020/03/04 Python
Django 用户登陆访问限制实例 @login_required
2020/05/13 Python
为什么python比较流行
2020/06/19 Python
python+django+selenium搭建简易自动化测试
2020/08/19 Python
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
化学相关工作求职信
2013/10/02 职场文书
党员个人自我剖析材料
2014/10/08 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
干部考核工作总结
2015/08/12 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书