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 相关文章推荐
屏蔽网页右键复制和ctrl+c复制的js代码
Jan 04 Javascript
jquery实现的导航固定效果
Apr 28 Javascript
addEventListener 的用法示例介绍
May 07 Javascript
window.returnValue使用方法示例介绍
Jul 03 Javascript
jquery性能优化高级技巧
Aug 24 Javascript
文件上传插件SWFUpload的使用指南
Nov 29 Javascript
jquery实现input框获取焦点的简单实例
Jan 26 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
Oct 09 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 Javascript
vue+element实现批量删除功能的示例
Feb 28 Javascript
vue.js移动数组位置,同时更新视图的方法
Mar 08 Javascript
vue使用echarts图表的详细方法
Oct 22 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
smarty缓存用法分析
2014/12/16 PHP
基于PHP实现短信验证码接口(容联运通讯)
2016/09/06 PHP
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
关于javascript DOM事件模型的两件事
2010/07/22 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
jQuery Easyui实现左右布局
2016/01/26 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
javascript容错处理代码(屏蔽js错误)
2017/01/20 Javascript
Jquery-data的三种用法
2017/04/18 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
2017/07/22 jQuery
JS实现table表格固定表头且表头随横向滚动而滚动
2017/10/26 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
2019/08/15 Javascript
layer 刷新某个页面的实现方法
2019/09/05 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
[04:39]显微镜下的DOTA2第十三期—Pis卡尔个人秀
2014/04/04 DOTA
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
Python 自动化表单提交实例代码
2017/06/08 Python
python回调函数中使用多线程的方法
2017/12/25 Python
python 日期排序的实例代码
2019/07/11 Python
使用python实现画AR模型时序图
2019/11/20 Python
pip install 使用国内镜像的方法示例
2020/04/03 Python
基于python和flask实现http接口过程解析
2020/06/15 Python
PyCharm 解决找不到新打开项目的窗口问题
2021/01/15 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
差生评语大全
2014/05/04 职场文书
2014年项目经理工作总结
2014/11/24 职场文书
项目合作意向书
2015/05/08 职场文书
MySQL不使用order by实现排名的三种思路总结
2021/06/02 MySQL
Python中json.load()和json.loads()有哪些区别
2021/06/07 Python
MyBatis核心源码深度剖析SQL语句执行过程
2022/05/20 Java/Android